feat(localized-multiline-text-input): set value of cacheMeasurements …

…based on whether isCondensed value has been toggled

packages/components/inputs/input-utils/src/multiline-input/multiline-input.tsx

@@ -1,4 +1,10 @@
-import { useRef, useCallback, ChangeEventHandler } from 'react';
+import {
+  useRef,
+  useCallback,
+  ChangeEventHandler,
+  useState,
+  useEffect,
+} from 'react';
 import TextareaAutosize, {
   TextareaHeightChangeMeta,
 } from 'react-textarea-autosize';
@@ -53,6 +59,20 @@ const MultilineInput = (props: TMultiLineInputProps) => {
   const { onHeightChange } = props;
   const ref = useRef<HTMLTextAreaElement | null>(null);
 
+  const [prevIsCondensed, setPrevIsCondensed] = useState(props.isCondensed);
+  const [cacheMeasurements, setCacheMeasurements] = useState(true);
+  useEffect(() => {
+    // If props.isCondensed has changed, the height of the layout will only be automatically recalculated if
+    // cacheMeasurements is set to false. So let's set cacheMeasurements to true by default to get the performance
+    // benefits, unless isCondensed value has changed, in which case we will set it to false for this render.
+    if (props.isCondensed !== prevIsCondensed) {
+      setCacheMeasurements(false);
+    } else {
+      setCacheMeasurements(true);
+    }
+    setPrevIsCondensed(props.isCondensed);
+  }, [props.isCondensed, prevIsCondensed]);
+
   const handleHeightChange = useCallback<
     (height: number, meta: TextareaHeightChangeMeta) => void
   >(
@@ -104,6 +124,7 @@ const MultilineInput = (props: TMultiLineInputProps) => {
       role="textbox"
       minRows={MIN_ROW_COUNT}
       maxRows={props.isOpen ? undefined : MIN_ROW_COUNT}
+      cacheMeasurements={cacheMeasurements}
       {...filterDataAttributes(props)}
     />
   );