Dropdown of searchable Select component is automatically opened again when browser window is focussed again

[mark-pfeifle]

Dependencies check up

• I have verified that I use latest version of all @mantine/* packages

What version of @mantine/* packages do you have in package.json?

7.6.1

What package has an issue?

@mantine/core

What framework do you use?

Next.js

In which browsers you can reproduce the issue?

Chrome

Describe the bug

Steps to reproduce:

• Select an option in a searchable "Select" component (e.g. https://mantine.dev/core/select/#searchable)
• Leave focus on that Select (i.e. do not click anywhere on the site afterwards)
• Unfocus Browser window by focussing e.g. text editor or other Window
• Click on the area where the dropdown of the Select has previously been

Behavior: On Browser window re-focus, the dropdown is automatically opened again, and the corresponding option where you clicked is selected.

This seems harmless at first, but it is really annoying when multiple selects are stacked, and one tries to e.g. copy & paste text from a text editor to the browser to input specific values into the search inputs (The upper Select is then uncontrollably changed when one tries to paste something in the second select).

If possible, include a link to a codesandbox with a minimal reproduction

https://mantine.dev/core/select/#searchable

Possible fix

Modify this line:

mantine/packages/@mantine/core/src/components/Select/Select.tsx

Line 261 in 7b1457f

onFocus={(event) => {

Self-service

• I would be willing to implement a fix for this issue

[rtivital]

It is intended behavior, the dropdown is opened when the input is focused. If it is not the desired behavior in your application, you can control the dropdown opened state with dropdownOpened prop or build a custom component with Combobox.

[harry-ignite]

It is intended behavior, the dropdown is opened when the input is focused. If it is not the desired behavior in your application, you can control the dropdown opened state with dropdownOpened prop or build a custom component with Combobox.

@rtivital I was about to open a very similar issue, but found this issue and another: 7858 both rejected.

Opening a dropdown as soon as the Select gets focus, even if technically correct, is an accessibility flaw. It fails WCAG rule 3.2.1 On Focus (A): Focusing an element must not trigger unexpected UI behavior like automatically opening or closing elements.

Also worth to mention the behaviour is different to how browsers work by default, see HTML reference:
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/datalist
or recommended pattern:
https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list/

Last but not least it's not consistent in Mantine codebase that most Select controls stay closed on focus, but one (editable) not.

I understand your suggestion regarding dropdownOpened usage, but using this option in practice means rewriting/overwriting some of the events for Select, including responding to onFocus and closing immediately after opening. Sounds buggy, isn't it? This can lead to race conditions and be very vulnerable to possible changes in the original component code. Additionally, not all states are easily accessible from outside the component, for example, determining whether we have items in the list that match the current text value. If an, we should also hide the dropdown. And in a few other situations, e.g. after selecting option with click or enter.

I would be interested to know the reasoning behind the current behaviour. And even if there are strong reasons not to change this default, I would be very grateful for the opportunity to add an additional property, e.g. named openOnFocus. For example the change in Select might look like:

onFocus={(event) => {
  !!searchable && combobox.openDropdown();
  onFocus?.(event);
}}

to

onFocus={(event) => {
  !!searchable && openOnFocus && combobox.openDropdown();
  onFocus?.(event);
}}

[rtivital]

I do not mind changing this with adding openOnFocus prop. You are welcome to submit a PR for this feature if you are interested.

[links-joe]

Hey, sorry to cause noise on a closed issue here, but this openOnFocus prop is great! Would it be possible to get it on DateInput as well? That component exhibits the same unwanted behavior and I would love to be able to turn if off there too.

[rtivital]

You are welcome to submit a PR for DateInput component