fix(TypeaheadSelect): Update input value only when appropriate (patte…

…rnfly#10826)
tlabaj · Jul 31, 2024 · 642236c · 642236c
1 parent 2b462a9
commit 642236c
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 7 deletions.
diff --git a/packages/react-templates/src/components/Select/TypeaheadSelect.tsx b/packages/react-templates/src/components/Select/TypeaheadSelect.tsx
@@ -22,14 +22,14 @@ export interface TypeaheadSelectOption extends Omit<SelectOptionProps, 'content'
   value: string | number;
 }
 
-export interface TypeaheadSelectProps extends Omit<SelectProps, 'toggle'> {
+export interface TypeaheadSelectProps extends Omit<SelectProps, 'toggle' | 'onSelect'> {
   /** @hide Forwarded ref */
   innerRef?: React.Ref<any>;
   /** Initial options of the select. */
   initialOptions: TypeaheadSelectOption[];
   /** Callback triggered on selection. */
   onSelect?: (
-    _event: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<HTMLInputElement>,
+    _event: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<HTMLInputElement> | undefined,
     selection: string | number
   ) => void;
   /** Callback triggered when the select opens or closes. */
@@ -154,14 +154,19 @@ export const TypeaheadSelectBase: React.FunctionComponent<TypeaheadSelectProps>
   ]);
 
   React.useEffect(() => {
+    // If the selected option changed and the current input value is the previously selected item, update the displayed value.
     const selectedOption = initialOptions.find((o) => o.selected);
-    setInputValue(String(selectedOption?.content ?? ''));
+    if (inputValue === selected && selectedOption?.value !== selected) {
+      setInputValue(String(selectedOption?.content ?? ''));
+    }
+    // Only update when options change
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [initialOptions]);
 
   const setActiveAndFocusedItem = (itemIndex: number) => {
     setFocusedItemIndex(itemIndex);
     const focusedItem = selectOptions[itemIndex];
-    setActiveItemId(focusedItem.value as string);
+    setActiveItemId(String(focusedItem.value));
   };
 
   const resetActiveAndFocusedItem = () => {
@@ -291,7 +296,7 @@ export const TypeaheadSelectBase: React.FunctionComponent<TypeaheadSelectProps>
   const onToggleClick = () => {
     onToggle && onToggle(!isOpen);
     setIsOpen(!isOpen);
-    textInputRef?.current?.focus();
+    textInputRef.current?.focus();
   };
 
   const onClearButtonClick = () => {
@@ -300,7 +305,7 @@ export const TypeaheadSelectBase: React.FunctionComponent<TypeaheadSelectProps>
     onInputChange && onInputChange('');
     setFilterValue('');
     resetActiveAndFocusedItem();
-    textInputRef?.current?.focus();
+    textInputRef.current?.focus();
     onClearSelection && onClearSelection();
   };
 

diff --git a/packages/react-templates/src/components/Select/examples/TypeaheadSelectDemo.tsx b/packages/react-templates/src/components/Select/examples/TypeaheadSelectDemo.tsx
@@ -35,7 +35,7 @@ export const SelectTypeaheadDemo: React.FunctionComponent = () => {
         noOptionsFoundMessage={(filter) => `No state was found for "${filter}"`}
         onClearSelection={() => setSelected(undefined)}
         onSelect={(_ev, selection) => {
-          if (!options.find((o) => o.content === selection)) {
+          if (!options.find((o) => o.value === selection)) {
             setOptions([...options, { content: String(selection), value: String(selection) }]);
           }
           setSelected(String(selection));