fix: allow controlled InputSearch to update onChange handler with tem…

…p text value (#654) * fix: allow cotrolled InputSearch to update onChange handler with temp text value * chore: adding test * chore: run formatter --------- Co-authored-by: Edward Granger <[email protected]>
washingtonpost · Aug 5, 2024 · 3884839 · 3884839
1 parent bdf21f9
commit 3884839
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 2 deletions.
diff --git a/packages/kit/src/input-search/InputSearchInput.test.tsx b/packages/kit/src/input-search/InputSearchInput.test.tsx
@@ -208,3 +208,38 @@ describe("InputSearchInput", () => {
     expect(inputElement).toHaveValue("Test item");
   });
 });
+
+describe("InputSearchInput - Controlled", () => {
+  test("updates the value when an item is highlighted", async () => {
+    const user = userEvent.setup();
+    const changeSpy = jest.fn();
+    render(
+      <InputSearchRoot aria-label="Example-Search" openOnFocus>
+        <InputSearchInput
+          name="fruit"
+          id="fruit"
+          value={""}
+          onChange={(event) => {
+            changeSpy(event.target.value);
+          }}
+        />
+        <InputSearchPopover>
+          <InputSearchList>
+            <InputSearchListItem value="Apple" />
+            <InputSearchListItem value="Banana" />
+            <InputSearchListItem value="Orange" />
+            <InputSearchListItem value="Kiwi" />
+            <InputSearchListItem value="Pineapple" />
+          </InputSearchList>
+        </InputSearchPopover>
+      </InputSearchRoot>
+    );
+
+    const inputElement = screen.getByRole("combobox");
+    await user.click(inputElement);
+    await user.keyboard("T");
+    await user.keyboard("[ArrowDown]");
+
+    expect(inputElement).toHaveValue("Apple");
+  });
+});
diff --git a/packages/kit/src/input-search/InputSearchInput.tsx b/packages/kit/src/input-search/InputSearchInput.tsx
@@ -25,6 +25,7 @@ export const InputSearchInput = React.forwardRef<
       label = "Search",
       autocomplete = true,
       id,
+      value,
       ...rest
     }: InputSearchInputProps,
     ref
@@ -61,8 +62,8 @@ export const InputSearchInput = React.forwardRef<
       }
     }, [state.selectionManager.focusedKey, setTempText]);
 
-    if (rest.value) {
-      inputProps.value = rest.value;
+    if (value) {
+      inputProps.value = value;
     }
     if (autocomplete && tempText !== undefined) {
       inputProps.value = tempText;

diff --git a/packages/kit/src/input-search/play.stories.tsx b/packages/kit/src/input-search/play.stories.tsx
@@ -220,6 +220,49 @@ export const Scroll = {
   },
 };
 
+const ControlledTemplate: StoryFn<typeof InputSearch.Root> = (args) => {
+  const [term, setTerm] = useState("");
+  return (
+    <Box css={{ width: "275px" }}>
+      <InputSearch.Root
+        {...args}
+        aria-label="Example-Search"
+        openOnFocus
+        onSelect={(value) => {
+          //setTerm(value);
+        }}
+      >
+        <InputSearch.Input
+          name="fruit"
+          id="fruit"
+          value={term}
+          onChange={(event) => {
+            setTerm(event.target.value);
+          }}
+        />
+        <InputSearch.Popover>
+          <InputSearch.List>
+            <InputSearch.ListItem value="Apple" />
+            <InputSearch.ListItem value="Banana" />
+            <InputSearch.ListItem value="Orange" />
+            <InputSearch.ListItem value="Kiwi" />
+            <InputSearch.ListItem value="Pineapple" />
+          </InputSearch.List>
+        </InputSearch.Popover>
+      </InputSearch.Root>
+    </Box>
+  );
+};
+
+export const Controlled = {
+  render: ControlledTemplate,
+  args: {},
+
+  parameters: {
+    chromatic: { disableSnapshot: true },
+  },
+};
+
 const InteractionsTemplate: StoryFn<typeof InputSearch.Root> = () => (
   <Box css={{ width: "275px", height: "340px" }}>
     <InputSearch.Root aria-label="Example-Search" openOnFocus>