Material-ui: [Autocomplete] openOnFocus is not working properly

[sruthisripathi]

• [x] The issue is present in the latest release.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

The popup opens even when openOnFocus is set to false which is the default value according to Autocomplete api doc

But if you focus towards the end of the input, it's not opening the popup - i.e., working as expected

Expected Behavior 🤔

The popup should not open when openOnFocus is set to false no matter where the user focuses in the input.

Steps to Reproduce 🕹

https://codesandbox.io/s/gallant-leaf-1u4zg

[oliviertassinari]

@sruthisripathi Only a click on the <input> will open the popup. I'm not aware of any alternative.

[sruthisripathi]

@sruthisripathi Only a click on the <input> will open the popup. I'm not aware of any alternative.

There is a padding around input field by default due to which you can focus just outside <input> but well inside what appears to be the textbox for autocomplete. If you focus in that padding area the popup opens if openOnFocus is set to true and doesn't open if openOnFocus is set to false i.e., working as expected. But if you focus inside <input>, the popup's opening even if you set openOnFocus to false.

[ilovett]

Ahhh! It's totally the click. I think there should at least be a note about that in the docs if this won't be fixed. The openOnFocus api works when tabbing focus onto the field but doesn't work as expected if I click on it.

[ilovett]

I'll be using controlled open with setOpen as a workaround...

[AurelienVernay]

useAutomplete.js:868 is responsible of opening the popup, and it doesn't check openOnFocus value.

It would be cool if handleInputChange checked open state value before opening popup indicator (check here)

I got a workaround by using onMouseDownCapture={(e) => e.stopPropagation()}} on the <Input>, but it would be nice to fix it.

[joejordan]

Came across this issue after discovering that openOnFocus was not working as expected. My use case is that I do not want to ping my server for options until the user has typed something. Thanks @AurelienVernay for the workaround until this is resolved.

[pelletencate]

@oliviertassinari I believe it's been properly established that openOnFocus is either broken or by design not working as people expect, this issue should be reopened.

[eps1lon]

@oliviertassinari Could you clarify what openOnFocus is supposed to do? I can't find a difference with this value on or off and none of our tests run with the prop turned off .

[oliviertassinari]

@eps1lon The openOnFocus prop allows developers to open the popup when the textbox receives the focus (Tab). In the issue's description, the popup is open by a click event on the <input>, not by the focus event. So it seems to behave correctly. I think that developers commenting here want a new disableOpenOnClick prop. So far we didn't implement it. Instead, we have proposed to control the open state and filter the events they want to ignore.

[eps1lon]

Oh, I got confused by the linked codesandbox which labels itself as openOnFocus: false but actually has openOnFocus={true}. Maybe that is why the behavior was viewed as unexpected by @sruthisripathi.

This is good from my perspective. Should've started with my own codesandbox though I do think we should adjust our tests.

[HimmatNandaPaperplane]

Hi @AurelienVernay

I have tried to use the useAutocomple.js file which will allow restricting the Popup if there is no option available. but getting an error while incorporating it with my existing code.

Followed steps
1)Copy useAutocomplete.js file
2)Import autocomplete files as a component

1)import useAutocomplete from '../core-comp-customization/useAutocomplete.js // Since this was showing undefined.
We tried with the below workaround
2)import UseAutocomplete from '../core-comp-customization/useAutocomplete.js'
After that changes it was showing Getting error message:- Error: Objects are not valid as a React child

Please share any working example where useAutocomple.js is imported & used
Please suggest

[benwiley4000]

@oliviertassinari I don't think that's the case. I'm setting the internal TextField to autoFocus and the menu opens automatically - no click.

I tried @AurelienVernay's workaround, but it doesn't work for me.

[oliviertassinari]

@benwiley4000 Do you have a reproduction with the latest version (v5.0.0-alpha.13)?