Autocomplete triggers onSelect when pressing Enter while beforeAction is disabled and no option is in focus

[abalejr]

Summary

When the beforeAction for Autocomplete is disabled, pressing Enter on the keyboard still triggers the onSelect callback, but with the content of the beforeAction minus the last character as the selected option. Subsequent presses of the Enter key select and deselect this value.

In the following reduced test case, the beforeAction is disabled if the inputValue is found among the labels of the Autocomplete options

Expected behavior

Pressing the Enter key while the beforeAction is disabled and no option is in focus should do nothing. Perhaps if the beforeAction becomes disabled and there are options shown, the first option should receive focus?

Actual behavior

Demo of problem

06-01-hrggv-skuuq.mp4

Steps to reproduce

Link to sandbox

1. Type in some text that matches (case-sensitive) the label of one of the options (eg: Vinyl)
2. Note that the beforeAction becomes disabled (expected)
3. Note that clicking the beforeAction does nothing (expected)
4. Note that pressing "Enter" on the keyboard triggers the onSelect callback with the content of the beforeAction minus the last character as the selected value (unexpected)
   • I've added some console.logs to better demonstrate this
5. Note that pressing Enter again removes that value from selected

Are you using React components?

No

Polaris version number

12

Browser

Chrome

Device

M1 MacBook Pro