fix(TextArea): Only use internal value for autogrow data property (#5358

) * Only use internal value for autogrow data property * Changeset * Only populate internalValue when needed (uncontrolled) and data-value when autogrow enabled * Only update internal value if autogrow is enabled * Add autogrow example to stickersheet * Use StickerSheet component
cultureamp · Dec 9, 2024 · 71e17eb · 71e17eb
1 parent 8aebe0b
commit 71e17eb
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 22 deletions.
diff --git a/.changeset/giant-maps-enjoy.md b/.changeset/giant-maps-enjoy.md
@@ -0,0 +1,5 @@
+---
+'@kaizen/components': patch
+---
+
+TextArea: no longer forced into controlled mode under the hood, allowing value manipulation via JS if needed
diff --git a/packages/components/src/TextArea/TextArea.tsx b/packages/components/src/TextArea/TextArea.tsx
@@ -33,25 +33,26 @@ export const TextArea = ({
 }: TextAreaProps): JSX.Element => {
   const [internalValue, setInternalValue] = useState<
     string | number | readonly string[] | undefined
-  >(autogrow && !value ? defaultValue : undefined)
-  // ^ holds an internal state of the value so that autogrow can still work with uncontrolled textareas
-  // essentially forces the textarea into an (interally) controlled mode if autogrow is true and mode is uncontrolled
+  >(defaultValue)
+  // ^holds an internal state of the value, used for the autogrow feature if uncontrolled (no `value` provided)
 
-  const controlledValue = value ?? internalValue
   const fallbackRef = useRef(null)
   const textAreaRef = propsTextAreaRef ?? fallbackRef
 
   const onChange = (event: React.ChangeEvent<HTMLTextAreaElement>): void => {
     propsOnChange?.(event)
-    setInternalValue(event.target.value)
+
+    if (!value && autogrow) {
+      setInternalValue(event.target.value)
+    }
   }
 
   return (
     <div
       className={classnames(styles.wrapper, {
         [styles.wrapperAutogrow]: autogrow,
       })}
-      data-value={autogrow ? controlledValue : undefined}
+      data-value={autogrow ? (value ?? internalValue) : undefined}
     >
       <textarea
         className={classnames(
@@ -65,8 +66,8 @@ export const TextArea = ({
         )}
         rows={rows}
         onChange={onChange}
-        value={controlledValue}
-        defaultValue={controlledValue ? undefined : defaultValue}
+        value={value}
+        defaultValue={value ? undefined : defaultValue}
         // ^ React throws a warning if you specify both a value and a defaultValue
         ref={textAreaRef}
         disabled={disabled}

diff --git a/packages/components/src/TextArea/_docs/TextArea.stickersheet.stories.tsx b/packages/components/src/TextArea/_docs/TextArea.stickersheet.stories.tsx
@@ -24,20 +24,29 @@ export default {
 
 const StickerSheetTemplate: StickerSheetStory = {
   render: ({ isReversed }) => (
-    <StickerSheet isReversed={isReversed} headers={['Default', 'Hover', 'Active', 'Focus']}>
-      <StickerSheet.Row header="Enabled">
-        <TextArea reversed={isReversed} />
-        <TextArea reversed={isReversed} data-sb-pseudo-styles="hover" />
-        <TextArea reversed={isReversed} data-sb-pseudo-styles="active" />
-        <TextArea reversed={isReversed} data-sb-pseudo-styles="focus" />
-      </StickerSheet.Row>
-      <StickerSheet.Row header="Disabled">
-        <TextArea reversed={isReversed} disabled />
-        <TextArea reversed={isReversed} disabled data-sb-pseudo-styles="hover" />
-        <TextArea reversed={isReversed} disabled data-sb-pseudo-styles="active" />
-        <TextArea reversed={isReversed} disabled data-sb-pseudo-styles="focus" />
-      </StickerSheet.Row>
-    </StickerSheet>
+    <>
+      <StickerSheet isReversed={isReversed} headers={['Default', 'Hover', 'Active', 'Focus']}>
+        <StickerSheet.Row header="Enabled">
+          <TextArea reversed={isReversed} />
+          <TextArea reversed={isReversed} data-sb-pseudo-styles="hover" />
+          <TextArea reversed={isReversed} data-sb-pseudo-styles="active" />
+          <TextArea reversed={isReversed} data-sb-pseudo-styles="focus" />
+        </StickerSheet.Row>
+        <StickerSheet.Row header="Disabled">
+          <TextArea reversed={isReversed} disabled />
+          <TextArea reversed={isReversed} disabled data-sb-pseudo-styles="hover" />
+          <TextArea reversed={isReversed} disabled data-sb-pseudo-styles="active" />
+          <TextArea reversed={isReversed} disabled data-sb-pseudo-styles="focus" />
+        </StickerSheet.Row>
+      </StickerSheet>
+      <StickerSheet title="Autogrow">
+        <TextArea
+          rows={1}
+          value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque mattis nisi sit amet consectetur ultricies. Vestibulum porta arcu vitae erat egestas pulvinar. Proin tincidunt mi ultricies risus ultrices semper. Donec consequat, mi at tincidunt mattis, felis metus semper metus, a imperdiet justo odio ac elit. Nulla et lacinia enim. Donec placerat, arcu a hendrerit iaculis, massa ante venenatis urna, vitae vestibulum massa orci et erat. Sed in cursus arcu. Fusce fringilla urna tincidunt risus sodales mollis. Ut sit amet mi vitae justo aliquam congue eget eu nisl. Mauris sit amet dolor fermentum, rutrum orci eget, feugiat mi. Etiam feugiat auctor augue, non volutpat nisi aliquet non. Praesent dignissim, lacus id iaculis porttitor, purus libero fermentum urna, in faucibus massa enim sed dui. Maecenas et nisi in nulla condimentum dictum. Maecenas tincidunt turpis non consequat pharetra. Suspendisse in auctor erat, vel ullamcorper elit. Nullam rutrum pharetra turpis, id luctus nisi sollicitudin ac. Maecenas sodales malesuada orci. Integer ultrices, nisi non blandit commodo, turpis enim iaculis ante, vel blandit diam sapien eget justo. Mauris scelerisque euismod quam, nec accumsan lorem venenatis vel. Sed rhoncus purus turpis, vel efficitur metus placerat et."
+          autogrow
+        />
+      </StickerSheet>
+    </>
   ),
   parameters: {
     pseudo: {