diff --git a/packages/combobox/__tests__/combobox.test.tsx b/packages/combobox/__tests__/combobox.test.tsx index d913df271..7757a9591 100644 --- a/packages/combobox/__tests__/combobox.test.tsx +++ b/packages/combobox/__tests__/combobox.test.tsx @@ -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"; @@ -251,6 +252,22 @@ describe("", () => { // expect(queryByRole("listbox")).toBeFalsy(); // }); }); + + describe("Combobox inside dialog", () => { + it("should not close the dialog when Esc key is pressed", () => { + let { getByRole, queryByRole } = render(); + 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(); + }); + }); }); //////////////////////////////////////////////////////////////////////////////// @@ -343,6 +360,20 @@ function BasicCombobox() { // ); // } +function BasicComboboxInDialog() { + const [showDialog, setShowDialog] = React.useState(true); + + return ( + setShowDialog(false)} + aria-label="dialog with combobox" + > + + + ); + } + function useCityMatch(term: string) { return term.trim() === "" ? null diff --git a/packages/combobox/src/combobox.tsx b/packages/combobox/src/combobox.tsx index 2ca097375..f29295cf4 100644 --- a/packages/combobox/src/combobox.tsx +++ b/packages/combobox/src/combobox.tsx @@ -1167,6 +1167,7 @@ function useKeyDown() { case "Escape": if (state !== IDLE) { transition(ESCAPE); + event.stopPropagation(); } break; case "Enter":