Stop combobox esc propagation

Author: bennet-stankidis-hs

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

packages/combobox/src/combobox.tsx

@@ -1167,6 +1167,7 @@ function useKeyDown() {
 			case "Escape":
 				if (state !== IDLE) {
 					transition(ESCAPE);
+					event.stopPropagation();
 				}
 				break;
 			case "Enter":