From 3884839890d5582f61ee8f56d85ea0b570aa8f23 Mon Sep 17 00:00:00 2001
From: wp-aberg <102534985+wp-aberg@users.noreply.github.com>
Date: Mon, 5 Aug 2024 11:22:03 -0400
Subject: [PATCH] fix: allow controlled InputSearch to update onChange handler
 with temp 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 <edward.granger@washpost.com>
---
 .../input-search/InputSearchInput.test.tsx    | 35 +++++++++++++++
 .../kit/src/input-search/InputSearchInput.tsx |  5 ++-
 .../kit/src/input-search/play.stories.tsx     | 43 +++++++++++++++++++
 3 files changed, 81 insertions(+), 2 deletions(-)

diff --git a/packages/kit/src/input-search/InputSearchInput.test.tsx b/packages/kit/src/input-search/InputSearchInput.test.tsx
index 66fd1f7c8..85610eff7 100644
--- 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
index 93f04a545..a364ee8fd 100644
--- 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
index dccf0591b..03480e184 100644
--- 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>