Select onFocus called way too many times

[shoxter]

Steps to reproduce

Steps:

1. Open this link to live example: https://codesandbox.io/p/sandbox/q649qz
2. Open console to see logs
3. Click into the select box
4. Click off the select box
5. Click off the select box again

Current behavior

On the initial focus, onFocus is called 4 times. On initial blur, onFocus is called 2 more times and onBlur is not called. On second blur, onBlur is called.

Expected behavior

On initial focus, onFocus should be called once and not again until component is blurred and refocused. onBlur should be called when input is initially blurred.

Context

I have a code associated to with onFocus event that is being called 4 times when I expect it to be called once.

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: mui select onfocus multiple times

[siriwatknp]

In the future, we will rely on Base UI Select. I don't think we want to change the behavior now.

Also, do you experience the bottleneck with it? or just an observation.

[shoxter]

I was experiencing a bottleneck but I manually implemented the expected behavior by adding a ref that gets set when onFocus is called and unset when onBlur is called. Then I check this refs value to be sure what I want to do in onFocus is only called once per onBlur.

Thank you!