diff --git a/packages/react/src/SelectPanel/SelectPanel.test.tsx b/packages/react/src/SelectPanel/SelectPanel.test.tsx index b42041c08c6..fb9b04d0370 100644 --- a/packages/react/src/SelectPanel/SelectPanel.test.tsx +++ b/packages/react/src/SelectPanel/SelectPanel.test.tsx @@ -1555,4 +1555,87 @@ for (const usingRemoveActiveDescendant of [false, true]) { }) }) }) + + describe('Event propagation', () => { + function EventSelectPanel() { + const [selected, setSelected] = React.useState([]) + const [filter, setFilter] = React.useState('') + const [open, setOpen] = React.useState(false) + + const onSelectedChange = (selected: SelectPanelProps['items']) => { + setSelected(selected) + } + + return ( + +
) => { + const isAlphabetKey = e.key.length === 1 && /[a-z\d]/i.test(e.key) + const container = e.currentTarget + + if (!isAlphabetKey) return + container.setAttribute('data-keydown-called', 'true') + }} + data-keydown-called="false" + > + + { + setFilter(value) + }} + open={open} + onOpenChange={isOpen => { + setOpen(isOpen) + }} + /> +
+
+ ) + } + + it('should prevent event propagation when using keyboard while focusing on an item', async () => { + const user = userEvent.setup() + + renderWithFlag(, true) + + const toggleButton = screen.getByRole('button', {name: 'Toggle SelectPanel'}) + const container = toggleButton.parentElement as HTMLDivElement + + await user.click(toggleButton) + + expect(screen.getByText('Select items')).toBeInTheDocument() + + const listbox = screen.getByRole('listbox') + expect(listbox).toBeInTheDocument() + expect(listbox).toHaveAttribute('aria-multiselectable', 'true') + + const options = screen.getAllByRole('option') + expect(options).toHaveLength(3) + + const firstOption = options[0] + expect(firstOption).toHaveTextContent('item one') + + await user.keyboard('{ArrowDown}') + + expect(firstOption).toHaveFocus() + + await user.keyboard('{ArrowDown}') + + // Trigger alphabet key that should not propagate + await user.keyboard('A') + + expect(options[1]).toHaveFocus() + expect(container.getAttribute('data-keydown-called')).toBe('false') + }) + }) }