mui / mui/base-ui

[combobox] Best method to handle tab key for using the selected item in the dropdown

Open
#2,894 2 comments 0 reactions 0 assignees View on GitHub
component: combobox docs
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.