Textarea: resize immediately upon receiving resize event (#3463)

* change: add story to demonstrate buggy textarea behaviour inside modal

* use lodash debounce with our own default value for wait

* Revert "use lodash debounce with our own default value for wait"

This reverts commit 7638297.

* change: add leading to debounce + use it in TextareaAutoSize

* changeset

* changeset + co-author

Co-authored-by: Halvor Haugan <halvor.haugan@nav.no>

---------

Co-authored-by: Halvor Haugan <halvor.haugan@nav.no>

.changeset/cool-trains-care.md

@@ -0,0 +1,5 @@
+---
+"@navikt/ds-react": patch
+---
+
+Textarea: resize immediately upon receiving resize event (eg. inside modal opening).

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

@@ -226,6 +226,27 @@ AutoScrollbar.argTypes = {
   minRows: { type: "number" },
 };
 
+export const InsideModal: StoryFn<typeof Textarea> = () => {
+  const ref = React.useRef<HTMLDialogElement>(null);
+
+  return (
+    <>
+      <Button onClick={() => ref.current?.showModal()}>Open modal</Button>
+      <React.StrictMode>
+        <Modal
+          ref={ref}
+          header={{ heading: "Skjema" }}
+          aria-label="Modal med textarea"
+        >
+          <Modal.Body>
+            <Textarea label="Har du noen tilbakemeldinger?" />
+          </Modal.Body>
+        </Modal>
+      </React.StrictMode>
+    </>
+  );
+};
+
 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.

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

@@ -167,19 +167,23 @@ const TextareaAutosize = forwardRef<HTMLTextAreaElement, TextareaAutosizeProps>(
         });
       };
 
-      const handleResize = debounce(() => {
-        renders.current = 0;
-
-        if (inputRef.current?.style.height || inputRef.current?.style.width) {
-          // User has resized manually
-          if (inputRef.current?.style.overflow === "hidden") {
-            setState((oldState) => ({ ...oldState, overflow: false })); // The state update isn't important, we just need to trigger a rerender
+      const handleResize = debounce(
+        () => {
+          renders.current = 0;
+
+          if (inputRef.current?.style.height || inputRef.current?.style.width) {
+            // User has resized manually
+            if (inputRef.current?.style.overflow === "hidden") {
+              setState((oldState) => ({ ...oldState, overflow: false })); // The state update isn't important, we just need to trigger a rerender
+            }
+            return;
           }
-          return;
-        }
 
-        syncHeightWithFlushSync();
-      });
+          syncHeightWithFlushSync();
+        },
+        166,
+        true,
+      );
 
       const input = inputRef.current!;
       const containerWindow = ownerWindow(input);

@navikt/core/react/src/util/debounce.ts

@@ -1,11 +1,19 @@
 "use client";
 // https://github.com/mui/material-ui/blob/master/packages/mui-utils/src/debounce.js
-export default function debounce(func, wait = 166) {
-  let timeout: ReturnType<typeof setTimeout>;
-  function debounced(this: any, ...args) {
+export default function debounce<T extends unknown[]>(
+  func: (...args: T) => void,
+  wait = 166,
+  leading = false,
+) {
+  let timeout: ReturnType<typeof setTimeout> | undefined;
+  function debounced(this: any, ...args: T) {
     const later = () => {
+      timeout = undefined;
       func.apply(this, args);
     };
+    if (!timeout && leading) {
+      later();
+    }
     clearTimeout(timeout);
     timeout = setTimeout(later, wait);
   }