title: Materail UI x React: Autocomplete closes when an item tries to show Popover
body: <p>I'm trying to have a customized Autocomplete and each item has a more icon when you hover a mouse pointer.</p>
  <p>When you click the icon, it supposes to bring Popover up, but instead it closes the Autocomplete list.</p>
  <p><a href="https://i.stack.imgur.com/uD2kh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uD2kh.png" alt="enter image description here" /></a></p>
  <p>The image above, I'm hovering a pointer on the icon, and when I clicked it, it closed the list.</p>
  <p>App.js</p>
  <pre><code>import React, { useState } from &quot;react&quot;;
  import { TextField, Paper } from &quot;@material-ui/core&quot;;
  import { Autocomplete, useAutocomplete } from &quot;@material-ui/lab&quot;;
  import Item from &quot;./Item&quot;;
  
  const App = () =&gt; {
    const [isOpen, setIsOpen] = useState(false);
    const [anchorEl, setAnchorEl] = useState(null);
  
    const countries = [
      { code: &quot;US&quot;, label: &quot;USA&quot;, phone: &quot;1&quot; },
      { code: &quot;HU&quot;, label: &quot;Hungary &quot;, phone: &quot;2&quot; },
      { code: &quot;IT&quot;, label: &quot;Italy &quot;, phone: &quot;3&quot; }
    ];
  
    const openMultipleOptionSearch = (event) =&gt; {
      setIsOpen(true);
      setAnchorEl(event.currentTarget);
    };
  
    const {
      getRootProps,
      getInputLabelProps,
      getInputProps,
      getListboxProps,
      getOptionProps,
      groupedOptions
    } = useAutocomplete({
      id: &quot;use-autocomplete-demo&quot;,
      options: countries,
      getOptionLabel: (option) =&gt; option.label,
      disableCloseOnSelect: true
    });
  
    return (
      &lt;div {...getRootProps()}&gt;
        &lt;input {...getInputProps()} /&gt;
        &lt;Paper&gt;
          {groupedOptions.length &gt; 0 &amp;&amp;
            groupedOptions.map((option, index) =&gt; (
              &lt;Item key={index} text={option.label} onClose={() =&gt; {}} /&gt;
            ))}
          {groupedOptions.length === 0 &amp;&amp; &lt;p&gt;No match.&lt;/p&gt;}
        &lt;/Paper&gt;
      &lt;/div&gt;
    );
  };
  
  export default App;
  </code></pre>
  <p>Item.js</p>
  <pre><code>import React, { useState } from &quot;react&quot;;
  import MoreHoriz from &quot;@material-ui/icons/MoreHoriz&quot;;
  import { Box, Typography, Button } from &quot;@material-ui/core&quot;;
  import Popup from &quot;./Popup&quot;;
  
  const Item = (prop) =&gt; {
    const [onMouseOver, setOnMouseOver] = useState(false);
    const [isOpen, setIsOpen] = useState(false);
    const [anchorEl, setAnchorEl] = useState(null);
  
    const openDeleteItem = (event) =&gt; {
      setAnchorEl(event.currentTarget);
      setIsOpen(true);
    };
  
    const closeDeleteItem = () =&gt; {
      setAnchorEl(null);
      setIsOpen(false);
      setOnMouseOver(false);
      prop.onClose();
    };
  
    return (
      &lt;Box
        onMouseOver={() =&gt; setOnMouseOver(true)}
        onMouseOut={() =&gt; isOpen || setOnMouseOver(false)}
      &gt;
        &lt;div className=&quot;item-container&quot;&gt;
          &lt;Typography variant=&quot;body1&quot;&gt;{prop.text}&lt;/Typography&gt;
        &lt;/div&gt;
        &lt;Button
          style={{ display: onMouseOver ? &quot;&quot; : &quot;none&quot; }}
          onClick={openDeleteItem}
        &gt;
          &lt;MoreHoriz /&gt;
        &lt;/Button&gt;
        &lt;Popup
          isOpen={isOpen}
          anchorEl={anchorEl}
          onClose={() =&gt; closeDeleteItem()}
        /&gt;
      &lt;/Box&gt;
    );
  };
  
  export default Item;
  </code></pre>
  <p>Popup.js</p>
  <pre><code>import React from 'react';
  import { Popover } from '@material-ui/core';
  
  const Popup = (prop) =&gt; {
    return (
      &lt;Popover
        id={prop.isOpen ? 'simple-popover' : undefined}
        open={prop.isOpen}
        anchorEl={prop.anchorEl}
        onClose={() =&gt; prop.onClose()}
      &gt;
        Popup content
      &lt;/Popover&gt;
    );
  };
  
  
  export default Popup;
  </code></pre>
  <p>Does anyone know how to fix this?</p>