SelectPanel: Add test for event propagation (#7006)

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Author: TylerJDev

packages/react/src/SelectPanel/SelectPanel.test.tsx

@@ -1520,4 +1520,86 @@ for (const usingRemoveActiveDescendant of [false, true]) {
       })
     })
   })
+
+  describe('Event propagation', () => {
+    function EventSelectPanel() {
+      const [selected, setSelected] = React.useState<SelectPanelProps['items']>([])
+      const [filter, setFilter] = React.useState('')
+      const [open, setOpen] = React.useState(false)
+
+      const onSelectedChange = (selected: SelectPanelProps['items']) => {
+        setSelected(selected)
+      }
+
+      return (
+        <div
+          onKeyDown={(e: React.KeyboardEvent<HTMLDivElement>) => {
+            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"
+        >
+          <button type="button" onClick={() => setOpen(!open)}>
+            Toggle SelectPanel
+          </button>
+          <SelectPanel
+            title="test title"
+            subtitle="test subtitle"
+            items={items}
+            placeholder="Select items"
+            placeholderText="Filter items"
+            selected={selected}
+            onSelectedChange={onSelectedChange}
+            filterValue={filter}
+            onFilterChange={value => {
+              setFilter(value)
+            }}
+            open={open}
+            onOpenChange={isOpen => {
+              setOpen(isOpen)
+            }}
+            _PrivateFocusManagement="roving-tabindex"
+          />
+        </div>
+      )
+    }
+
+    it('should prevent event propagation when using keyboard while focusing on an item', async () => {
+      const user = userEvent.setup()
+
+      render(<EventSelectPanel />)
+
+      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')
+    })
+  })
 }