🐛 Textarea: Sett riktig høyde når brukt i Modal + StrictMode

.changeset/eighty-fireants-call.md

@@ -0,0 +1,5 @@
+---
+"@navikt/ds-react": patch
+---
+
+:bug: Textarea: Sett riktig høyde når brukt i Modal + StrictMode

@navikt/core/react/src/form/stories/textarea.stories.tsx

@@ -1,6 +1,7 @@
 import { Meta, StoryFn, StoryObj } from "@storybook/react";
 import React, { useState } from "react";
 import { Button } from "../../button";
+import { Modal } from "../../modal";
 import { Textarea } from "../index";
 
 const meta: Meta<typeof Textarea> = {
@@ -186,3 +187,20 @@ AutoScrollbar.argTypes = {
   maxRows: { type: "number" },
   minRows: { type: "number" },
 };
+
+export const ModalStrictMode: StoryFn<typeof Textarea> = () => {
+  // Story added after fixing an issue where TextareaAutoSize would reach max re-renders
+  // and set the height to 2px when used in StrictMode in a Modal that is initially open.
+  return (
+    <React.StrictMode>
+      <Modal open>
+        <Modal.Body>
+          <Textarea label="Har du noen tilbakemeldinger?" />
+        </Modal.Body>
+      </Modal>
+    </React.StrictMode>
+  );
+};
+ModalStrictMode.parameters = {
+  chromatic: { disable: true }, // Not reproducable in Chromatic
+};

@navikt/core/react/src/util/TextareaAutoSize.tsx

@@ -10,7 +10,7 @@ type State = {
   overflow?: boolean | undefined;
 };
 
-const updateState = (
+const checkState = (
   prevState: State,
   newState: State,
   renders: React.MutableRefObject<number>,
@@ -25,20 +25,12 @@ const updateState = (
       prevState.overflow !== overflow)
   ) {
     renders.current += 1;
-    return {
-      overflow,
-      outerHeightStyle,
-    };
+    return newState;
   }
-  if (process.env.NODE_ENV !== "production") {
-    if (renders.current === 20) {
-      console.error(
-        [
-          "Textarea: Too many re-renders. The layout is unstable.",
-          "TextareaAutosize limits the number of renders to prevent an infinite loop.",
-        ].join("\n"),
-      );
-    }
+  if (process.env.NODE_ENV !== "production" && renders.current === 20) {
+    console.error(
+      "Textarea: Too many re-renders. The layout is unstable. TextareaAutosize limits the number of renders to prevent an infinite loop.",
+    );
   }
   return prevState;
 };
@@ -92,9 +84,7 @@ const TextareaAutosize = forwardRef<HTMLTextAreaElement, TextareaAutosizeProps>(
   ) => {
     const { current: isControlled } = useRef(value != null);
     const inputRef = useRef<HTMLTextAreaElement>(null);
-
     const handleRef = useMergeRefs(inputRef, ref);
-
     const shadowRef = useRef<HTMLTextAreaElement>(null);
     const renders = useRef(0);
     const [state, setState] = useState<State>({ outerHeightStyle: 0 });
@@ -153,31 +143,27 @@ const TextareaAutosize = forwardRef<HTMLTextAreaElement, TextareaAutosizeProps>(
       return { outerHeightStyle, overflow };
     }, [maxRows, minRows, other.placeholder]);
 
-    const syncHeight = React.useCallback(() => {
+    const syncHeight = () => {
       const newState = getUpdatedState();
-
       if (isEmpty(newState)) {
         return;
       }
-
-      setState((prevState) => updateState(prevState, newState, renders));
-    }, [getUpdatedState]);
+      setState((prevState) => checkState(prevState, newState, renders));
+    };
 
     useClientLayoutEffect(() => {
       const syncHeightWithFlushSync = () => {
         const newState = getUpdatedState();
-
         if (isEmpty(newState)) {
           return;
         }
 
         // In React 18, state updates in a ResizeObserver's callback are happening after
         // the paint, this leads to an infinite rendering.
-        //
-        // Using flushSync ensures that the states is updated before the next pain.
+        // Using flushSync ensures that the state is updated before the next paint.
         // Related issue - https://github.com/facebook/react/issues/24331
         ReactDOM.flushSync(() => {
-          setState((prevState) => updateState(prevState, newState, renders));
+          setState((prevState) => checkState(prevState, newState, renders));
         });
       };