@dr.pogodin/react-utils 1.43.22 → 1.43.23

package/build/types-code/shared/components/TextArea/index.d.ts

@@ -7,6 +7,7 @@ type Props = {
     onChange?: ChangeEventHandler<HTMLTextAreaElement>;
     onKeyDown?: KeyboardEventHandler<HTMLTextAreaElement>;
     placeholder?: string;
+    testId?: string;
     theme: Theme<ThemeKeyT>;
     value?: string;
 };

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.43.22",
+  "version": "1.43.23",
   "bin": {
     "react-utils-build": "bin/build.js",
     "react-utils-setup": "bin/setup.js"

package/src/shared/components/TextArea/index.tsx

@@ -4,6 +4,7 @@ import {
   type FunctionComponent,
   type KeyboardEventHandler,
   useEffect,
+  useLayoutEffect,
   useRef,
   useState,
 } from 'react';
@@ -23,6 +24,7 @@ type Props = {
   onChange?: ChangeEventHandler<HTMLTextAreaElement>;
   onKeyDown?: KeyboardEventHandler<HTMLTextAreaElement>;
   placeholder?: string;
+  testId?: string;
   theme: Theme<ThemeKeyT>;
   value?: string;
 };
@@ -33,6 +35,7 @@ const TextArea: FunctionComponent<Props> = ({
   onChange,
   onKeyDown,
   placeholder,
+  testId,
   theme,
   value,
 }) => {
@@ -58,8 +61,14 @@ const TextArea: FunctionComponent<Props> = ({
     };
   }, []);
 
-  // This resizes the text area when its content is modified.
-  useEffect(() => {
+  // Resizes the text area when its content is modified.
+  //
+  // NOTE: useLayoutEffect() instead of useEffect() makes difference here,
+  // as it helps to avoid visible "content/height" jumps (i.e. with just
+  // useEffect() it becomes visible how the content is modified first,
+  // and then input height is incremented, if necessary).
+  // See: https://github.com/birdofpreyru/react-utils/issues/313
+  useLayoutEffect(() => {
     const el = hiddenAreaRef.current;
     if (el) setHeight(el.scrollHeight);
   }, [localValue]);
@@ -74,10 +83,20 @@ const TextArea: FunctionComponent<Props> = ({
         // of the primary textarea's height.
         readOnly
         ref={hiddenAreaRef}
-        value={localValue}
+
+        // The "-1" value of "tabIndex" removes this hidden text area from
+        // the tab-focus-chain.
+        tabIndex={-1}
+
+        // NOTE: With empty string value ("") the scrolling height of this text
+        // area is zero, thus collapsing <TextArea> height below the single line
+        // input height. To avoid it we fallback to whitespace (" ") character
+        // here.
+        value={localValue || ' '}
       />
       <textarea
         className={theme.textarea}
+        data-testid={process.env.NODE_ENV === 'production' ? undefined : testId}
         disabled={disabled}
         onBlur={onBlur}
 

package/src/shared/components/TextArea/style.scss

@@ -19,6 +19,7 @@
     overflow: hidden;
     padding: 0.3em 0.3em calc(0.3em + 1px);
     resize: none;
+    width: 100%;
 
     &:focus {
       border-color: blue;