[Autocomplete] Requires two clicks to open on mobile ios after state is set

[kaplantm]

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

Current Behavior 😯

When using a controlled autocomplete input, user clicks once to open the menu and selects a value. Then then click off the auto complete to elsewhere on the page. Then the click back on the autocomplete. It does not open. They have to click a second time and then it opens.

Expected Behavior 🤔

When using a controlled autocomplete input, user clicks once to open the menu and selects a value. Then then click off the auto complete to elsewhere on the page. Then the click back on the autocomplete. It opens.

Steps to Reproduce 🕹

https://codesandbox.io/s/romantic-meninsky-kcqgh and here is the code (from autocomplete docs):

/* eslint-disable no-use-before-define */
import React from "react";
import TextField from "@material-ui/core/TextField";
import Autocomplete from "@material-ui/lab/Autocomplete";

const top100Films = [
  { title: "The Shawshank Redemption", year: 1994 },
  { title: "Inglourious Basterds", year: 2009 },
  { title: "Snatch", year: 2000 },
  { title: "3 Idiots", year: 2009 },
  { title: "Monty Python and the Holy Grail", year: 1975 }
];

function Playground() {
  const [value, setValue] = React.useState(null);

  return (
    <div style={{ width: 300 }}>
      <Autocomplete
        options={top100Films}
        openOnFocus
        getOptionLabel={option => option.title}
        id="controlled-demo"
        value={value}
        onChange={(event, newValue) => {
          setValue(newValue);
        }}
        renderInput={params => (
          <TextField {...params} label="controlled" margin="normal" />
        )}
      />
    </div>
  );
}

export default Playground;

Context 🔦

This will prevent me from using autocomplete componnent due to its effect on mobile users.

Your Environment 🌎

Tech	Version
Material-UI	v4.9.12
Material-UI Lab	v4.0.0-alpha.53
React	16.13.1
Browser	iOS Safari
TypeScript	3.8.3
etc.

[joshwooding]

Can reproduce. Here's the codesandbox link: https://codesandbox.io/s/romantic-meninsky-kcqgh
Can also reproduce on the documentation.

[oliviertassinari]

I can't explain the behavior. No idea.

[joshwooding]

Wow... after some digging (and some blind luck) I found the issue. Looks like the dreaded "double-tap link" issue has resurfaced: https://css-tricks.com/annoying-mobile-double-tap-link-issue/.

Summary: iOS is great and if a ":hover" rule is detected you need to double tap to click.

[kaplantm]

@joshwooding Thanks for looking into this so quickly. I'm considering using this component in a project within the next couple weeks. Do you think there will be a quick fix / workaround or should I look into an alternative? Thanks

[oliviertassinari]

@joshwooding Awesome. @kaplantm What do you think of this fix? Do you want to work on a pull request? :)

diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js
index ddb4f1d71..da2e010cf 100644
--- a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js
+++ b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js
@@ -16,9 +16,14 @@ export { createFilterOptions };
 export const styles = (theme) => ({
   /* Styles applied to the root element. */
   root: {
-    '&:hover $clearIndicatorDirty, &$focused $clearIndicatorDirty': {
+    '&$focused $clearIndicatorDirty': {
       visibility: 'visible',
     },
+    // Avoid double tap issue on iOS
+    '@media (pointer: fine)': {
+      '&:hover $clearIndicatorDirty': {
+        visibility: 'visible',
+      },
+    },
   },
   /* Styles applied to the root element if `fullWidth={true}`. */
   fullWidth: {

We already use the fine media query for the date picker with @dmtrKovalenko in mui/material-ui-pickers#1653.