fix: initial autoResize functionality (#2453)

openedx · Jul 21, 2023 · be5cf27 · be5cf27
1 parent 8a32af8
commit be5cf27
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 9 deletions.
diff --git a/src/Form/FormControl.jsx b/src/Form/FormControl.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import RBFormControl from 'react-bootstrap/FormControl';
@@ -34,13 +34,7 @@ const FormControl = React.forwardRef(({
     value: props.value,
   });
 
-  const controlProps = getControlProps({
-    ...props,
-    // eslint-disable-next-line react/prop-types
-    onBlur: callAllHandlers(checkInputEventValue, props.onBlur),
-  });
-
-  const handleOnChange = (e) => {
+  const handleResize = useCallback(() => {
     if (as === 'textarea' && autoResize) {
       if (!resolvedRef.current.initialHeight && !resolvedRef.current.offsets) {
         resolvedRef.current.initialHeight = resolvedRef.current.offsetHeight;
@@ -49,6 +43,20 @@ const FormControl = React.forwardRef(({
       resolvedRef.current.style.height = `${resolvedRef.current.initialHeight}px`;
       resolvedRef.current.style.height = `${resolvedRef.current.scrollHeight + resolvedRef.current.offsets}px`;
     }
+  }, [as, autoResize, resolvedRef]);
+
+  useEffect(() => {
+    handleResize();
+  }, [handleResize]);
+
+  const controlProps = getControlProps({
+    ...props,
+    // eslint-disable-next-line react/prop-types
+    onBlur: callAllHandlers(checkInputEventValue, props.onBlur),
+  });
+
+  const handleOnChange = (e) => {
+    handleResize();
     if (onChange) {
       onChange(e);
     }

diff --git a/src/Form/tests/FormControl.test.jsx b/src/Form/tests/FormControl.test.jsx
@@ -18,7 +18,7 @@ describe('FormControl', () => {
     ref.offsetHeight = 90;
     ref.clientHeight = 88;
     expect(useReferenceSpy).toHaveBeenCalledTimes(1);
-    expect(ref.current.style.height).toBeFalsy();
+    expect(ref.current.style.height).toBe('0px');
     wrapper.find('textarea').simulate('change');
     expect(onChangeFunc).toHaveBeenCalledTimes(1);
     expect(ref.current.style.height).toEqual(`${ref.current.scrollHeight + ref.current.offsets}px`);