[combobox] clearing value using the input-inside-popup pattern
- Dominant language
- TypeScript
- Stars
- 10.9k
- Forks
- 543
- Avg merge
- 1d 20h
- Merged PRs (30d)
- 101
Description
# Bug report
## Current behavior
When you build a Combobox that uses the [input-inside-popup](https://base-ui.com/react/components/combobox#input-inside-popup) pattern, the ESC key does not clear the selection.
Clearing the value of the Combobox with the ESC key is currently managed by the `Combobox.Input`. If you are using `Combobox.Input` with the popup pattern, the behavior closes the popup, which is expected. If youre using this outside the popup, it also clears the value. However, there doesnt seem to be a clean way to clear the value when using a `Combobox.Trigger`, as this component does not have keyboard event handlers for `Escape`.
As a workaround you can render a `Combobox.Clear` element and manually invoke the click action on the `Combobox.Clear` element.
```tsx
const clearRef = useRef(null);
const handleKeyDown: KeyboardEventHandler = (event) => {
if (event.key === 'Escape' && event.target === event.currentTarget && clearRef.current) {
clearRef.current?.click();
event.stopPropagation();
}
};
return (
<>
// Style it with display: none
);
```
This could be by design perhaps. But it does seem odd that the "input-inside-popup" behaves slightly different than the other variants of the Combobox.
## Expected behavior
Pressing the ESC key on a `Combobox.Trigger` clears the input.
## Reproducible example
https://base-ui.com/react/components/combobox#input-inside-popup
## Base UI version
1.5.0
## Which browser are you using?
Edge
## Which OS are you using?
Mac OS
## Which assistive tech are you using (if applicable)?
Voiceover
## Additional context
Edit: My workaround is too aggressive by using `event.stopPropagation`. This prevents dialogs from closing
Contributor guide
Assessment
This issue has not been assessed yet.