Update multi-line input’s height on focus

fixes auto-sizing behavior of multi-line inputs inside popovers or dialogs (which are initialized as display: none, meaning their scrollHeight is 0)
acusti · Feb 12, 2024 · e53aa73 · e53aa73
1 parent b16e55d
commit e53aa73
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 6 deletions.
diff --git a/packages/docs/stories/InputText.stories.tsx b/packages/docs/stories/InputText.stories.tsx
@@ -125,7 +125,7 @@ const MULTI_LINE_INPUT_WITH_AUTO_FOCUS_PROPS = {
     multiLine: true,
     name: 'autofocus-multi-line-input',
     selectTextOnFocus: true,
-    style: { display: 'block' }
+    style: { display: 'block' },
 };
 
 export const MultiLineInputWithAutoFocusInPopover: Story = {
@@ -136,10 +136,7 @@ export const MultiLineInputWithAutoFocusInPopover: Story = {
                 <button popoverTarget="multi-line-input-with-autofocus-in-popover">
                     Open Popover
                 </button>
-                <div
-                    id="multi-line-input-with-autofocus-in-popover"
-                    popover="auto"
-                >
+                <div id="multi-line-input-with-autofocus-in-popover" popover="auto">
                     <InputText {...MULTI_LINE_INPUT_WITH_AUTO_FOCUS_PROPS} />
                 </div>
             </>

diff --git a/packages/input-text/src/InputText.tsx b/packages/input-text/src/InputText.tsx
@@ -159,6 +159,14 @@ export default React.forwardRef<HTMLInputElement, Props>(function InputText(
     // Initialize input height in useEffect
     useEffect(setInputHeight, [setInputHeight]);
 
+    const handleFocus = useCallback(
+        (event: React.FocusEvent<HTMLInputElement>) => {
+            if (onFocus) onFocus(event);
+            if (multiLine) setInputHeight();
+        },
+        [multiLine, onFocus, setInputHeight],
+    );
+
     const handleBlur = useCallback(
         (event: React.FocusEvent<HTMLInputElement>) => {
             if (onBlur) onBlur(event);
@@ -250,7 +258,7 @@ export default React.forwardRef<HTMLInputElement, Props>(function InputText(
             onBlur={handleBlur}
             onChange={onChange}
             onDoubleClick={startEditing}
-            onFocus={onFocus}
+            onFocus={handleFocus}
             onKeyDown={handleKeyDown}
             onKeyUp={onKeyUp}
             onSelect={handleSelect}