🐛 Textarea: Skru av autosize ved manuell resize (#2518)

* 🐛 Textarea: Skru av autosize ved manuell resize * typer stories * ikke debounce resize
navikt · Nov 28, 2023 · 8dda590 · 8dda590
1 parent 21d5ddd
commit 8dda590
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 23 deletions.
diff --git a/.changeset/fast-monkeys-pay.md b/.changeset/fast-monkeys-pay.md
@@ -0,0 +1,6 @@
+---
+"@navikt/ds-react": patch
+"@navikt/ds-css": patch
+---
+
+:bug: Textarea: Skru av autosize ved manuell resize
diff --git a/@navikt/core/css/form/textarea.css b/@navikt/core/css/form/textarea.css
@@ -21,10 +21,16 @@
 }
 
 .navds-textarea__wrapper {
+  --__ac-textarea-height: initial;
+
   position: relative;
   min-width: 100%;
 }
 
+.navds-textarea__input:first-child {
+  height: var(--__ac-textarea-height);
+}
+
 .navds-textarea__input {
   appearance: none;
   padding: var(--a-spacing-2);

diff --git a/@navikt/core/react/src/form/stories/textarea.stories.tsx b/@navikt/core/react/src/form/stories/textarea.stories.tsx
@@ -1,5 +1,5 @@
-import { Meta, StoryObj } from "@storybook/react";
-import React from "react";
+import { Meta, StoryFn, StoryObj } from "@storybook/react";
+import React, { useState } from "react";
 import { Button } from "../../button";
 import { Textarea } from "../index";
 
@@ -38,11 +38,11 @@ export const Default: StoryObj<typeof Textarea> = {
   },
 };
 
-export const Small = () => {
+export const Small: StoryFn = () => {
   return <Textarea size="small" label="Ipsum enim quis culpa" />;
 };
 
-export const Description = () => {
+export const Description: StoryFn = () => {
   return (
     <div className="colgap">
       <Textarea
@@ -58,7 +58,7 @@ export const Description = () => {
   );
 };
 
-export const Error = () => {
+export const Error: StoryFn = () => {
   return (
     <div className="colgap">
       <Textarea
@@ -89,7 +89,7 @@ export const Error = () => {
   );
 };
 
-export const Disabled = () => {
+export const Disabled: StoryFn = () => {
   return (
     <div className="colgap">
       <Textarea label="Ipsum enim quis culpa" disabled />
@@ -98,19 +98,19 @@ export const Disabled = () => {
   );
 };
 
-export const HideLabel = () => {
+export const HideLabel: StoryFn = () => {
   return <Textarea label="Ipsum enim quis culpa" hideLabel />;
 };
 
-export const MaxLength = () => {
+export const MaxLength: StoryFn = () => {
   return <Textarea maxLength={50} label="Ipsum enim quis culpa" />;
 };
 
-export const MinRows = () => {
+export const MinRows: StoryFn = () => {
   return <Textarea minRows={5} label="Ipsum enim quis culpa" />;
 };
 
-export const MaxRows = () => {
+export const MaxRows: StoryFn = () => {
   return (
     <Textarea
       maxRows={3}
@@ -120,11 +120,23 @@ export const MaxRows = () => {
   );
 };
 
-export const Resize = () => {
+export const Resize: StoryFn = () => {
   return <Textarea resize label="Ipsum enim quis culpa" />;
 };
 
-export const Readonly = () => {
+export const Controlled: StoryFn = () => {
+  const [value, setValue] = useState("");
+  return (
+    <Textarea
+      resize
+      label="Ipsum enim quis culpa"
+      value={value}
+      onChange={(event) => setValue(event.currentTarget.value)}
+    />
+  );
+};
+
+export const Readonly: StoryFn = () => {
   return (
     <div className="colgap">
       <Textarea
@@ -143,7 +155,7 @@ export const Readonly = () => {
   );
 };
 
-export const AutoScrollbar = (props) => (
+export const AutoScrollbar: StoryFn<typeof Textarea> = (props) => (
   <div
     style={{
       border: "1px solid lightGreen",
@@ -156,12 +168,12 @@ export const AutoScrollbar = (props) => (
       <h1>Header</h1>
     </div>
     <Textarea
+      {...props}
       resize
       label="Textarea with autoScrollbar"
       description="Description"
       maxLength={30}
       UNSAFE_autoScrollbar
-      {...props}
     />
     <div style={{ border: "1px dashed gray" }}>
       <Button>Send</Button>

diff --git a/@navikt/core/react/src/react-css.d.ts b/@navikt/core/react/src/react-css.d.ts
@@ -2,7 +2,7 @@ import "react";
 
 declare module "react" {
   interface CSSProperties {
-    [key: `--ac-${string}`]: string | undefined;
-    [key: `--__ac-${string}`]: string | undefined;
+    [key: `--ac-${string}`]: string | number | undefined;
+    [key: `--__ac-${string}`]: string | number | undefined;
   }
 }
diff --git a/@navikt/core/react/src/util/TextareaAutoSize.tsx b/@navikt/core/react/src/util/TextareaAutoSize.tsx
@@ -179,6 +179,15 @@ const TextareaAutosize = forwardRef<HTMLTextAreaElement, TextareaAutosizeProps>(
 
       const handleResize = () => {
         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;
+        }
+
         syncHeightWithFlushSync();
       };
 
@@ -223,6 +232,20 @@ const TextareaAutosize = forwardRef<HTMLTextAreaElement, TextareaAutosizeProps>(
       }
     };
 
+    const mainStyle: React.CSSProperties = {
+      ["--__ac-textarea-height"]: state.outerHeightStyle + "px",
+      // Need a large enough difference to allow scrolling.
+      // This prevents infinite rendering loop.
+      overflow:
+        state.overflow &&
+        !autoScrollbar &&
+        !inputRef.current?.style.height &&
+        !inputRef.current?.style.width
+          ? "hidden"
+          : undefined,
+      ...style,
+    };
+
     return (
       <>
         <textarea
@@ -231,13 +254,7 @@ const TextareaAutosize = forwardRef<HTMLTextAreaElement, TextareaAutosizeProps>(
           ref={handleRef}
           // Apply the rows prop to get a "correct" first SSR paint
           rows={minRows}
-          style={{
-            height: state.outerHeightStyle,
-            // Need a large enough difference to allow scrolling.
-            // This prevents infinite rendering loop.
-            overflow: state.overflow && !autoScrollbar ? "hidden" : undefined,
-            ...style,
-          }}
+          style={mainStyle}
           {...other}
           className={className}
         />