[combobox] Best method to handle tab key for using the selected item in the dropdown
- Dominant language
- TypeScript
- Stars
- 10.9k
- Forks
- 543
- Avg merge
- 1d 20h
- Merged PRs (30d)
- 101
Description
# Get help
## Ask a question
> Before opening an issue, please consider starting a [GitHub Discussion](https://github.com/mui/base-ui/discussions) or asking the community for help in our [Discord](https://base-ui.com/r/discord).
**NOTE: Discussions are not open so I couldn't start there**
---
I'm integrating the combobox into a grid library where I'd like the user interaction to include pressing the Tab key as a means to update the value with the currently selected item in the dropdown.
```tsx
const emptyArray = []
const ComboboxEditor = ({ val, save, close, column }) => {
const source = column?.source || emptyArray
return (
{
if (value !== null) {
save(value)
close()
}
}}
>
{/* ...rest of the combobox */}
)
}
```
Currently, without the combobox handling the Tab key as a "save" selected item action, everything works as expected. The grid library handles the key event bubbling out of this component so that "Enter" navigates down in the grid to the cell below, and "Tab" navigates to the next cell in the grid towards the right. The Tab key however does not trigger the combobox to save the selected item in the dropdown. I was able to get halfway there by implementing `onKeyDownCapture` on the `Combobox.Input` and dispatching a new `KeyboardEvent` with `key: 'Enter'` but that breaks how the parent component (grid library) handles the new keyboard event:
```tsx
onKeyDownCapture={e => {
if (e.key === 'Tab') {
tabPressed.current = true
e.stopPropagation()
e.preventDefault()
const evt = new KeyboardEvent('keydown', {
key: 'Enter',
code: 'Enter',
bubbles: true,
})
e.target.dispatchEvent(evt)
}
}}
```
Thoughts on how to best implement handling this? Or is this something that could be implemented in the library?
Contributor guide
Assessment
This issue has not been assessed yet.