fix: prevent frozen InputSearch after text editing (#658)

washingtonpost · Aug 27, 2024 · b3efa3e · b3efa3e
1 parent d819389
commit b3efa3e
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 4 deletions.
diff --git a/packages/kit/src/input-search/InputSearchInput.tsx b/packages/kit/src/input-search/InputSearchInput.tsx
@@ -65,7 +65,7 @@ export const InputSearchInput = React.forwardRef<
     if (value) {
       inputProps.value = value;
     }
-    if (autocomplete && tempText !== undefined) {
+    if (autocomplete && withKeyboard.current) {
       inputProps.value = tempText;
     }
 

diff --git a/packages/kit/src/input-search/InputSearchRoot.tsx b/packages/kit/src/input-search/InputSearchRoot.tsx
@@ -100,11 +100,17 @@ export const InputSearchRoot = ({
     state
   );
 
+  const prevSelectedKey = React.useRef(state.selectedKey);
   React.useEffect(() => {
-    if (state.selectedItem && onSelect) {
+    if (
+      state.selectedItem &&
+      onSelect &&
+      prevSelectedKey.current !== state.selectedKey
+    ) {
       onSelect(
         state.selectedItem.textValue || (state.selectedItem.rendered as string)
       );
+      prevSelectedKey.current = state.selectedKey;
     }
   }, [state.selectedItem, onSelect]);
 

diff --git a/packages/kit/src/input-search/play.stories.tsx b/packages/kit/src/input-search/play.stories.tsx
@@ -28,8 +28,8 @@ const useCityMatch = (term: string) => {
       term.trim() === ""
         ? null
         : matchSorter(cities, term, {
-          keys: [(item) => `${item.city}, ${item.state}`],
-        }),
+            keys: [(item) => `${item.city}, ${item.state}`],
+          }),
     [term]
   );
 };
@@ -292,3 +292,23 @@ export const Interactions = {
     await expect(input).toHaveDisplayValue("Apple");
   },
 };
+
+export const ControlledKeyboardInteractions = {
+  render: ControlledTemplate,
+
+  play: async () => {
+    const input = await screen.findByLabelText("Search");
+    await userEvent.type(input, "app", {
+      delay: 100,
+    });
+    await userEvent.keyboard("[ArrowDown]");
+    await userEvent.keyboard("[ArrowDown]");
+    await userEvent.keyboard("[ArrowDown]");
+    await expect(input).toHaveDisplayValue("Orange");
+    await userEvent.keyboard("[Backspace]");
+    await expect(input).toHaveDisplayValue("Orang");
+    const clearButton = await screen.findByText("Clear");
+    await userEvent.click(clearButton);
+    await expect(input).toHaveDisplayValue("");
+  },
+};