mui / mui/base-ui

[combobox] clearing value using the input-inside-popup pattern

Open
#4,938 1 comment 0 reactions 0 assignees View on GitHub
component: combobox has workaround
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

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.