mui / mui/base-ui

[autocomplete] Option to opt out of Escape clearing the input value

Open
#4,245 2 comments 0 reactions 0 assignees View on GitHub
component: autocomplete has workaround type: new feature
Dominant language
TypeScript
Stars
10.9k
Forks
543
Avg merge
1d 20h
Merged PRs (30d)
101

Description

# Feature request

## Summary

When the `Autocomplete` popup is closed and the user presses Escape, the input value is cleared. Is it possible to opt out of this behavior?

For `Autocomplete` use cases, the input value is often free-form text (e.g. a URL, an address) where suggestions are helpful but the typed value is the primary content. Clearing it on Escape is unexpected — users typically do not expect Escape to erase their input.

From a glance at the source code, this behavior appears to be inherited from the [`Combobox` implementation](https://github.com/mui/base-ui/blob/master/packages/react/src/combobox/input/ComboboxInput.tsx).

This makes sense for `Combobox`, where the input reflects a selected value that should be resettable. This is not always true for `Autocomplete` use cases that sometimes behave more like normal `input`s, where some users won't ever trigger open the suggestions popover. The [APG](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/) also says that clearing the input is "optional".

A `clearOnEscape` prop or similar would let consumers preserve the input value.

## Examples in other libraries

- [MUI Autocomplete](https://mui.com/material-ui/api/autocomplete/) has a `clearOnEscape` prop (defaults to `false`).
- Native `` does not clear the input on Escape.

## Motivation

There seems to be a workaround for controlled mode, but not for uncontrolled.

```js
onValueChange={ ( newValue, details ) => {
if ( details?.reason === 'escapeKey' ) return;
setValue( newValue );
} }
```

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.