[Autocomplete] Add equivalent to openOnFocus for click events

[pelletencate]

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

openOnFocus does not affect what happens when an out-of-focus input is clicked. In the comments of #20286, it was argued that this is by design. As such, I hereby request an equivalent (suggested: disableOpenOnClick) prop that disables opening the suggestions on click.

Motivation 🔦

I had to add this to the embedded TextField

          [...]
          onMouseDownCapture={ (e) => e.stopPropagation()}
          [...]

[oliviertassinari]

@pelletencate What's your use case for a new disableOpenOnClick prop? So far, we got #20286 (comment) reported as a viable use case.

[eps1lon]

Should this rather be a single prop that handles both? Otherwise we should specify use cases for all combinations:

1. openOnFocus={false} openOnClick={false}
2. openOnFocus={false} openOnClick={true}
3. openOnFocus={true} openOnClick={false}
4. openOnFocus={true} openOnClick={true}

[oliviertassinari]

@eps1lon These combinations look valid.

I have updated the proposal to disableOpenOnClick to match our naming convention.
react-select has a openMenuOnClick prop, it was reported early on: JedWatson/react-select#1131.

[eps1lon]

These combinations look valid.

It's trivial that these are valid. My point is what the use case for each of these combinations would be.

[oliviertassinari]

• open on focus was asked to prevent masking the UI when quickly tabbing between form fields.
• open on click was asked to delay XHR requests. On https://next.material-ui.com/components/autocomplete/#google-maps-place you don't want to open the popup and display "no options" we will use the prop there. Like in this demo https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete

[eps1lon]

open on focus was asked to prevent masking the UI when quickly tabbing between form fields.
open on click was asked to delay XHR requests.

These are the same?

[oliviertassinari]

I think that we could bundle them under a single prop if the expected default behavior was identical for the two events. It's not the case. By default, the Autocomplete responds to click but not focus events.

[eps1lon]

think that we could bundle them under a single prop if the expected default behavior was identical for the two events.

This is what I've been saying. Props, like components, should be declarative.

By default, the Autocomplete responds to click but not focus events.

Why though? I don't see the distinction since depending on the user these are somewhat equivalent interactions.

[oliviertassinari]

@eps1lon Initially, the behavior of the Autocomplete was openOnFocus={true} (no click logic), which developers complained about: #18815. In #18815 (comment) you made a great point around how Chrome's autofill/autocomplete popup behaves by default. We went on reproducing it. Later on, developers complained about the open on click logic to not be complete, missing the case for handling already selected values: #20730.

Does it answer the question?

https://material-ui.com/getting-started/templates/sign-in/

[RiyaNegi]

@oliviertassinari Hey mind if i pick this issue up?

[oliviertassinari]

@RiyaNegi Feel free to work on it. I have reread the thread, it seems to still be relevant and bring value.

[RiyaNegi]

@oliviertassinari So just to be clear, we want a disableOpenOnClick prop to disable dropdown of options on a mouse click event. Rather it would open when the user types something in the Autocomplete input box.

[oliviertassinari]

@RiyaNegi Correct

[RiyaNegi]

@oliviertassinari Hey so I added the disableOpenOnClick prop and it is working for every use case as far as I know (All the tests passed on the local setup). To tackle the use case where both openOnFocus and disableOpenOnClick are true, I created a state flag called isClicked which is set to true when onMouseDown is triggered. This was needed because the onFocus event needs something to differentiate between an event triggered by key press or by a mouse press.

This was my solution, however if you have any suggestions for better implementation, do let me know. :)

[eps1lon]

It seems to me the behavior requested can already be implemented in a controlled Autocomplete with

open={open}
onOpen={(event) => {
  if (event.type !== "mousedown" && event.type !== 'focus') {
    setOpen(true);
  }
}}
onClose={() => setOpen(false)}

-- https://codesandbox.io/s/autocomplete-disableopenonclick-g0bt3?file=/src/Demo.tsx

If that is the case, then we shouldn't bloat the interface and implementation for such a niche feature.

[RiyaNegi]

@eps1lon @oliviertassinari Hey so I checked out your solution and it works, but it blocks the dropdown completely( doesn't open on either mouse click or focus). Also, the bigger issue is if you add openOnFocus prop to your solution, it opens the dropdown on both mouse click and keyboard click.
I solved this particular problem in the library with the introduction of disableOpenOnClick.

--https://codesandbox.io/s/autocomplete-disableopenonclick-forked-g43i1?file=/src/Demo.tsx (demo with openOnFocus prop)

[eps1lon]

@eps1lon @oliviertassinari Hey so I checked out your solution and it works, but it blocks the dropdown completely( doesn't open on either mouse click or focus). Also, the bigger issue is if you add openOnFocus prop to your solution, it opens the dropdown on both mouse click and keyboard click.
I solved this particular problem in the library with the introduction of disableOpenOnClick.

--codesandbox.io/s/autocomplete-disableopenonclick-forked-g43i1?file=/src/Demo.tsx (demo with openOnFocus prop)

Fixed with

-if (event.type !== "mousedown") {
+if (event.type !== "mousedown" && event.type !== 'focus') {
  (true);
}

[RiyaNegi]

@eps1lon @oliviertassinari I added your suggestion to the demo but it's not working. The dropdown doesn't open regardless of mouse click or focus.
--https://codesandbox.io/s/autocomplete-disableopenonclick-forked-ybugz?file=/src/Demo.tsx

I know it's a niche case to be covering (disableOpenOnClick and openOnFocus together), but I guess someone might need it?

[eps1lon]

The dropdown doesn't open regardless of mouse click or focus.

But that was the point of the codesandbox. People were asking for disableOpenOnClick which I implemented in the codesandbox.

[RiyaNegi]

I think there is slight misunderstanding. The plan is to cover a case where both(disableOpenOnClick and openOnFocus) are used together right?
Maybe I am missing something, but currently in the examples you are giving, only one use case is getting covered.
if the following is added along with openOnFocus prop, it doesn't work well.

if (event.type !== "mousedown") {
 (true);
}

this is because when openOnFocus is passed, it always sets setOpen(true). So adding any external code along with openOnFocus, won't make a difference.

[eps1lon]

A reminder that this issue is still not clearly outlined.

Currently it's ignored that a click causes a focus and how a conflict of openOnFocus and disableOpenOnClick should be resolved.

There is no "intuitive" solution for this so we need to define clearer what the expected behavior is and how an API for that might look like. It sounds like we want to further split between keyboard-focus and click-focus.

[akomm]

Use case for disable onClickOpen: you have freeSolo mode and user wants to type a new value, in a form the popup does cover the form inputs beneath and so the user has to click-away the popup.

Maybe we should start try summerize use cases and figure out if they overlap or are the same? Not sure if that leads to some result, but if there isn't any better proposal, I start:

• open on typing & some matches (useful when working as combox in free solo mode)
• close when typing & no matches (if it was open before)
• auto-open on focus (be it click or tab)

Probably not covering everything. This just the interaction with the input itself, the options for this use case behave always same, on select write the value to text box, select be via click or keyboard or touch.