Skip to content

Commit

Permalink
Stop combobox esc propagation
Browse files Browse the repository at this point in the history
  • Loading branch information
bennet-stankidis-hs committed Sep 7, 2022
1 parent 26c8266 commit a53bb80
Show file tree
Hide file tree
Showing 2 changed files with 32 additions and 0 deletions.
31 changes: 31 additions & 0 deletions packages/combobox/__tests__/combobox.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import {
ComboboxPopover,
useComboboxContext,
} from "@reach/combobox";
import { Dialog } from "@reach/dialog";
import { matchSorter } from "match-sorter";
import cities from "./cities";
import { afterEach, describe, expect, it } from "vitest";
Expand Down Expand Up @@ -251,6 +252,22 @@ describe("<Combobox />", () => {
// expect(queryByRole("listbox")).toBeFalsy();
// });
});

describe("Combobox inside dialog", () => {
it("should not close the dialog when Esc key is pressed", () => {
let { getByRole, queryByRole } = render(<BasicComboboxInDialog />);
let input = getByRole("combobox");

expect(getByRole("dialog")).toBeInTheDocument();

userEvent.type(input, "e");
expect(getByRole("listbox")).toBeInTheDocument();

userEvent.keyboard("{esc}");
expect(queryByRole("listbox")).not.toBeInTheDocument();
expect(queryByRole("dialog")).toBeInTheDocument();
});
});
});

////////////////////////////////////////////////////////////////////////////////
Expand Down Expand Up @@ -343,6 +360,20 @@ function BasicCombobox() {
// );
// }

function BasicComboboxInDialog() {
const [showDialog, setShowDialog] = React.useState(true);

return (
<Dialog
isOpen={showDialog}
onDismiss={() => setShowDialog(false)}
aria-label="dialog with combobox"
>
<BasicCombobox />
</Dialog>
);
}

function useCityMatch(term: string) {
return term.trim() === ""
? null
Expand Down
1 change: 1 addition & 0 deletions packages/combobox/src/combobox.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -1167,6 +1167,7 @@ function useKeyDown() {
case "Escape":
if (state !== IDLE) {
transition(ESCAPE);
event.stopPropagation();
}
break;
case "Enter":
Expand Down

0 comments on commit a53bb80

Please sign in to comment.