diff --git a/packages/textarea/src/Component.tsx b/packages/textarea/src/Component.tsx index 3842acf831..53384e2473 100644 --- a/packages/textarea/src/Component.tsx +++ b/packages/textarea/src/Component.tsx @@ -74,7 +74,7 @@ export const Textarea = forwardRef( nativeScrollbar = Boolean(nativeScrollbarProp ?? nativeScrollbar); - const textareaRef = useRef(null); + const [textareaNode, setTextareaNode] = useState(null); const pseudoTextareaRef = useRef(null); const [focused, setFocused] = useState(false); @@ -82,12 +82,7 @@ export const Textarea = forwardRef( const [scrollPosition, setScrollPosition] = useState(0); const [focusVisible] = useFocus( - /* - * При первом рендере textareaRef.current === null, то нужно пересоздать реф для корректной работы хука - * TODO: исправить хук useFocus, чтобы он поддерживал изменение ноды - */ - // eslint-disable-next-line react-hooks/exhaustive-deps - useMemo(() => ({ current: textareaRef.current }), [textareaRef.current]), + useMemo(() => ({ current: textareaNode }), [textareaNode]), 'keyboard', ); @@ -108,10 +103,10 @@ export const Textarea = forwardRef( // Хак, так как react-textarea-autosize перестал поддерживать maxHeight useEffect(() => { - if (autosize && maxHeight && textareaRef.current && textareaRef.current.style) { - textareaRef.current.style.maxHeight = `${maxHeight}px`; + if (autosize && maxHeight && textareaNode && textareaNode.style) { + textareaNode.style.maxHeight = `${maxHeight}px`; } - }, [autosize, maxHeight]); + }, [autosize, maxHeight, textareaNode]); const handleTextareaFocus = (event: React.FocusEvent) => { setFocused(true); @@ -185,7 +180,7 @@ export const Textarea = forwardRef( onChange: handleTextareaChange, value: uncontrolled ? stateValue : value, rows, - ref: mergeRefs([ref, textareaRef]), + ref: mergeRefs([ref, setTextareaNode]), 'data-test-id': dataTestId, onScroll: handleTeaxtareaScroll, };