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 (
+
+ );
+ }
+
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":