✨(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:
@@ -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(
|
||||
|
||||
Reference in New Issue
Block a user