diff --git a/.changeset/small-hairs-peel.md b/.changeset/small-hairs-peel.md new file mode 100644 index 00000000..7a199738 --- /dev/null +++ b/.changeset/small-hairs-peel.md @@ -0,0 +1,5 @@ +--- +"@telegraph/combobox": patch +--- + +fix events from bubbling in combobox diff --git a/packages/combobox/src/Combobox/Combobox.tsx b/packages/combobox/src/Combobox/Combobox.tsx index 631538d8..82f27ca9 100644 --- a/packages/combobox/src/Combobox/Combobox.tsx +++ b/packages/combobox/src/Combobox/Combobox.tsx @@ -377,6 +377,9 @@ const Trigger = ({ size = "2", ...props }: TriggerProps) => { } if (event.key === "ArrowDown") { + // Don't allow the event to bubble up outside of the menu + event.stopPropagation(); + event.preventDefault(); context.onOpenToggle(); return; } @@ -514,6 +517,8 @@ const Content = ({ { if (context.open) { + // Don't allow the event to bubble up outside of the menu + event.stopPropagation(); event.preventDefault(); context.setOpen(false); } @@ -552,6 +557,9 @@ const Content = ({ event.preventDefault(); }} onKeyDown={(event: React.KeyboardEvent) => { + // Don't allow the event to bubble up outside of the menu + event.stopPropagation(); + // If the first option is focused and the user presses the up // arrow key, focus the search input const options = context.contentRef?.current?.querySelectorAll( @@ -650,12 +658,14 @@ const Option = ({ : contextValue?.value === value; const handleSelection = (event: Event | React.KeyboardEvent) => { + // Don't allow the event to bubble up outside of the menu + event.stopPropagation(); + // Don't do anything if the key isn't a selection key const keyboardEvent = event as React.KeyboardEvent; if (keyboardEvent.key && !SELECT_KEYS.includes(keyboardEvent.key)) return; // Don't bubble up the event - event.stopPropagation(); event.preventDefault(); if (context.closeOnSelect === true) {