title: How to I keep a Material-ui Select open when I click on only one of the items in it
body: <p>I have been writing a custom Material-UI <code>Select</code> dropdown which has an optional text field at the top to allow the user to search / filter items in the <code>Select</code> if there were many entries.</p>
  
  <p>I am struggling with how to keep the <code>Select</code> open when I click on the text field (rendered as an <code>InputBase</code>) and just have the normal behavior (of closing the <code>Select</code> when a regular <code>MenuItem</code> is selected.</p>
  
  <p>CodeSandbox here : <a href="https://codesandbox.io/s/inspiring-newton-9qsyf" rel="noreferrer">https://codesandbox.io/s/inspiring-newton-9qsyf</a></p>
  
  <pre><code> const searchField: TextField = props.searchable ? (
      &lt;InputBase
        className={styles.searchBar}
        onClick={(event: Event) =&gt; {
          event.stopPropagation();
          event.preventDefault();
        }}
        endAdornment={
          &lt;InputAdornment position="end"&gt;
            &lt;Search /&gt;
          &lt;/InputAdornment&gt;
        }
      /&gt;
    ) : null;
  
    return (
      &lt;FormControl&gt;
        &lt;Select
          className={styles.root}
          input={&lt;InputBase onClick={(): void =&gt; setIconOpen(!iconOpen)} /&gt;}
          onBlur={(): void =&gt; setIconOpen(false)}
          IconComponent={iconOpen ? ExpandMore : ExpandLess}
          {...props}
        &gt;
          {searchField}
          {dropdownElements.map(
            (currEntry: string): HTMLOptionElement =&gt; (
              &lt;MenuItem key={currEntry} value={currEntry}&gt;
                {currEntry}
              &lt;/MenuItem&gt;
            )
          )}
        &lt;/Select&gt;
      &lt;/FormControl&gt;
    );
  
  </code></pre>
  
  <p>As you can see above I've tried using <code>stopPropagation</code> and <code>preventDefault</code> but to no avail.</p>