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 = { -
+
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(function InputText( // Initialize input height in useEffect useEffect(setInputHeight, [setInputHeight]); + const handleFocus = useCallback( + (event: React.FocusEvent) => { + if (onFocus) onFocus(event); + if (multiLine) setInputHeight(); + }, + [multiLine, onFocus, setInputHeight], + ); + const handleBlur = useCallback( (event: React.FocusEvent) => { if (onBlur) onBlur(event); @@ -250,7 +258,7 @@ export default React.forwardRef(function InputText( onBlur={handleBlur} onChange={onChange} onDoubleClick={startEditing} - onFocus={onFocus} + onFocus={handleFocus} onKeyDown={handleKeyDown} onKeyUp={onKeyUp} onSelect={handleSelect}