From 6c4035fcdedaf2716deff5b61de61f91c7a14162 Mon Sep 17 00:00:00 2001 From: akhatri Date: Tue, 18 Nov 2025 18:10:22 +0530 Subject: [PATCH] fix(react-templates): fix TypeaheadSelect state synchronization issue The closeMenu() function was overwriting inputValue with stale state when called from selectOption(), causing displayed value to lag one selection behind. Additionally, filterValue was not being cleared when closing without selecting, causing the filter to persist and hide options on subsequent opens. Modified closeMenu() to accept shouldRestoreInput parameter to distinguish between: - Selection flow: Skip restoration (value already set correctly) - Cancellation flow: Restore to previous selected value and clear filter Fixes #12146 --- .../src/components/Select/TypeaheadSelect.tsx | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/packages/react-templates/src/components/Select/TypeaheadSelect.tsx b/packages/react-templates/src/components/Select/TypeaheadSelect.tsx index 481bf24b869..a90bc38d7e0 100644 --- a/packages/react-templates/src/components/Select/TypeaheadSelect.tsx +++ b/packages/react-templates/src/components/Select/TypeaheadSelect.tsx @@ -195,13 +195,20 @@ export const TypeaheadSelectBase: FunctionComponent = ({ } }; - const closeMenu = () => { + const closeMenu = (shouldRestoreInput = true) => { onToggle && onToggle(false); setIsOpen(false); resetActiveAndFocusedItem(); - const option = initialOptions.find((o) => o.value === selected); - if (option) { - setInputValue(String(option.content)); + + // Only restore input value when user cancels (doesn't select) + // Don't restore when explicitly selecting an option (handled by selectOption) + if (shouldRestoreInput) { + const option = initialOptions.find((o) => o.value === selected); + if (option) { + setInputValue(String(option.content)); + } + // Clear filter when closing without selecting to show all options on next open + setFilterValue(''); } }; @@ -223,7 +230,7 @@ export const TypeaheadSelectBase: FunctionComponent = ({ setFilterValue(''); setSelected(String(option.value)); - closeMenu(); + closeMenu(false); // Don't restore - we just set the correct value above }; const _onSelect = (_event: ReactMouseEvent | undefined, value: string | number | undefined) => {