(react) add onSearchInputChange callback to searchable select

We want to be able to notify an event when the search term of the
searchable select gets updated.
This commit is contained in:
Nathan Vasse
2024-02-26 14:41:15 +01:00
committed by NathanVss
parent 680365a117
commit 04ab3306e2
8 changed files with 142 additions and 3 deletions

View File

@@ -1193,6 +1193,67 @@ describe("<Select multi={true} />", () => {
expectOptions(["Paris"]);
});
it("get the search term using onSearchInputChange", async () => {
const user = userEvent.setup();
let searchTerm: string | undefined;
render(
<CunninghamProvider>
<Select
label="Cities"
options={[
{
label: "Paris",
value: "paris",
},
{
label: "Panama",
value: "panama",
},
{
label: "London",
value: "london",
},
{
label: "New York",
value: "new_york",
},
{
label: "Tokyo",
value: "tokyo",
},
]}
searchable={true}
multi={true}
onSearchInputChange={(e) => {
searchTerm = e.target.value;
}}
/>
</CunninghamProvider>,
);
const input = screen.getByRole("combobox", {
name: "Cities",
});
expect(searchTerm).toBeUndefined();
await user.click(input);
expect(searchTerm).toBeUndefined();
await user.type(input, "Pa");
expect(searchTerm).toEqual("Pa");
await user.type(input, "r");
expect(searchTerm).toEqual("Par");
expectOptions(["Paris"]);
const option: HTMLLIElement = screen.getByRole("option", {
name: "Paris",
});
await user.click(option);
expect(searchTerm).toBeUndefined();
});
it("selects the option on enter", async () => {
const user = userEvent.setup();
render(