From e53aa7388e1b92622f55747d2507e3d59f9f80b7 Mon Sep 17 00:00:00 2001
From: Andrew Patton <andrew@acusti.ca>
Date: Mon, 12 Feb 2024 11:09:44 -0800
Subject: [PATCH] =?UTF-8?q?Update=20multi-line=20input=E2=80=99s=20height?=
 =?UTF-8?q?=20on=20focus?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

fixes auto-sizing behavior of multi-line inputs inside popovers or dialogs (which are initialized as display: none, meaning their scrollHeight is 0)
---
 packages/docs/stories/InputText.stories.tsx |  7 ++-----
 packages/input-text/src/InputText.tsx       | 10 +++++++++-
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/packages/docs/stories/InputText.stories.tsx b/packages/docs/stories/InputText.stories.tsx
index 5bc547a6..30ac4c8a 100644
--- 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
index 08025533..b446736a 100644
--- 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}