From a2b393687860e507b2482faa2bc7493c8b0f9e1d Mon Sep 17 00:00:00 2001
From: Julian Nymark <julian.nymark@nav.no>
Date: Thu, 19 Dec 2024 14:23:39 +0100
Subject: [PATCH] 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 7638297765de68b2155624fe0663fea868a87136.

* 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                |  5 ++++
 .../src/form/textarea/textarea.stories.tsx    | 21 +++++++++++++++
 .../core/react/src/util/TextareaAutoSize.tsx  | 26 +++++++++++--------
 @navikt/core/react/src/util/debounce.ts       | 14 +++++++---
 4 files changed, 52 insertions(+), 14 deletions(-)
 create mode 100644 .changeset/cool-trains-care.md

diff --git a/.changeset/cool-trains-care.md b/.changeset/cool-trains-care.md
new file mode 100644
index 0000000000..df0e28f46b
--- /dev/null
+++ b/.changeset/cool-trains-care.md
@@ -0,0 +1,5 @@
+---
+"@navikt/ds-react": patch
+---
+
+Textarea: resize immediately upon receiving resize event (eg. inside modal opening).
diff --git a/@navikt/core/react/src/form/textarea/textarea.stories.tsx b/@navikt/core/react/src/form/textarea/textarea.stories.tsx
index 13772cdb50..70222517c4 100644
--- a/@navikt/core/react/src/form/textarea/textarea.stories.tsx
+++ b/@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.
diff --git a/@navikt/core/react/src/util/TextareaAutoSize.tsx b/@navikt/core/react/src/util/TextareaAutoSize.tsx
index 4679c1cfbd..080580e2fd 100644
--- a/@navikt/core/react/src/util/TextareaAutoSize.tsx
+++ b/@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);
diff --git a/@navikt/core/react/src/util/debounce.ts b/@navikt/core/react/src/util/debounce.ts
index 743b151c93..44f87ec67b 100644
--- a/@navikt/core/react/src/util/debounce.ts
+++ b/@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);
   }