title: Material UI Autocomplete - Disable listbox after the item selection
body: <p>I'm creating an Autocomplete component in React.js with the help of <a href="https://material-ui.com/getting-started/installation/" rel="nofollow noreferrer">Material-UI</a> headless <a href="https://material-ui.com/components/autocomplete/#useautocomplete" rel="nofollow noreferrer">useAutoComplete</a> hook. The component is working properly. When the user tries to type any character, the <code>Listbox</code> will automatically open.</p>
  <p>But the problem is that when the user selects anything and pays attention to the input element, the <code>ListBox</code> reopens. How can I prevent this?</p>
  <p><strong>Codesandbox:</strong></p>
  <p><a href="https://codesandbox.io/s/fg56t-8lez1?fontsize=14&amp;hidenavigation=1&amp;theme=dark" rel="nofollow noreferrer"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="Edit fg56t" /></a></p>
  <p><strong>Code:</strong></p>
  <pre><code>import React from 'react';
  import useAutocomplete from '@material-ui/lab/useAutocomplete';
  
  function AutocompleteComponent(props) {
    const { data } = props;
  
    const [value, setValue] = React.useState('');
    const [isOpen, setIsOpen] = React.useState(false);
  
    const handleOpen = function () {
      if (value.length &gt; 0) {
        setIsOpen(true);
      }
    };
  
    const handleInputChange = function (event, newInputValue) {
      setValue(newInputValue);
      if (newInputValue.length &gt; 0) {
        setIsOpen(true);
      } else {
        setIsOpen(false);
      }
    };
  
    const {
      getRootProps,
      getInputProps,
      getListboxProps,
      getOptionProps,
      groupedOptions
    } = useAutocomplete({
      id: 'form-control',
      options: data,
      autoComplete: true,
      open: isOpen, // Manually control
      onOpen: handleOpen, // Manually control
      onClose: () =&gt; setIsOpen(false), // Manually control
      inputValue: value, // Manually control
      onInputChange: handleInputChange, // Manually control
      getOptionLabel: (option) =&gt; option.name
    });
  
    const listItem = {
      className: 'form-control__item'
    };
  
    return (
      &lt;div className=&quot;app&quot;&gt;
        &lt;div className=&quot;form&quot;&gt;
          &lt;div {...getRootProps()}&gt;
            &lt;input
              type=&quot;text&quot;
              className=&quot;form-control&quot;
              placeholder=&quot;Location&quot;
              {...getInputProps()}
            /&gt;
          &lt;/div&gt;
          {groupedOptions.length &gt; 0 &amp;&amp; (
            &lt;ul
              className=&quot;form-control__box&quot;
              aria-labelledby=&quot;autocompleteMenu&quot;
              {...getListboxProps()}
            &gt;
              {groupedOptions.map((option, index) =&gt; {
                return (
                  &lt;li {...getOptionProps({ option, index })} {...listItem}&gt;
                    &lt;div&gt;{option.name}&lt;/div&gt;
                  &lt;/li&gt;
                );
              })}
            &lt;/ul&gt;
          )}
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
  
  export default AutocompleteComponent;
  </code></pre>