[material-ui][Autocomplete] Using limitTags prevents clicking buttons outside of autocomplete while autocomplete is focused

[wouterh]

Steps to reproduce

Link to live example: issue is also in the MUI docs

Steps:

1. Select options until there are more than limitTags options selected
2. Try to click a button outside of the autocomplete (e.g. the 'expand code' button)

Current behavior

The autocomplete is unfocused, but the click on the button is ignored.

Expected behavior

The click is also propagated to the button.

Context

We have a form with an AutoComplete where we set limitTags to prevent the AutoComplete from growing indefinitely. When people make a change to the selection in the AutoComplete and immediately click our 'Save changes' button, the click is not propagated to the button and the changes are not saved.

Your environment

Tested on latest Chrome (linux and mac) and Firefox (linux).

Search keywords: Autocomplete limitTags

[ZeeshanTamboli]

The limitTags prop is only applied when there's a blur event. Clicking the button outside of the autocomplete triggers a blur event for the autocomplete. Users won't see the tags being limited until they click outside of the autocomplete. Wouldn't it be better to show the limited tags all the time (#21328)? If so, would this solution work for you: #21328 (comment)? I'm suggesting this because I believe it would offer a better user experience for your use case.

[wouterh]

Adding the renderTags in #21328 (comment) does solve the click blocking on buttons outside of the AutoComplete. The solution is not ideal though, since there is then no easy way to see all selected elements while filling in the form, which is also confusing for our users.

[ZeeshanTamboli]

I'm unsure if we can keep both behaviors. I'll leave this issue open for now.