title: Material-UI Select native how to not show the first placeholder option when opened?
body: <p>I have a select component that I'm rendering in native when on mobile. I want to only show the options after the first placeholder option when the select is opened. I tried using the <code>onOpen</code> function but it just fires over and over when the component is opened.</p>
  <pre><code>&lt;FormControl sx={{width: &quot;100%&quot;}} size={&quot;small&quot;}&gt;
      &lt;InputLabel 
          id=&quot;historySelectLabelID&quot;
          sx={{fontFamily: &quot;KanitItalic !important&quot;}}
      &gt;
          History
      &lt;/InputLabel&gt;
      &lt;Select
          labelId=&quot;historySelectLabelID&quot;
          label=&quot;History&quot;
          onChange={(e) =&gt; handleHistoryClick(e.target.value)}
          native
          value={&quot;&quot;}
          displayEmpty
      &gt;
          &lt;option value=&quot;&quot; aria-label=&quot;None&quot; /&gt;
          {history.slice(0).reverse().map((player) =&gt; {
              return (
                  &lt;option
                      data-player-id={player._id}
                      key={player._id.substring(player._id.lastIndexOf(&quot;/&quot;)+1, player._id.lastIndexOf(&quot;.&quot;))}
                      value={player._id}
                      sx={{fontFamily: &quot;KanitItalic !important&quot;}}
                  &gt;
                      {player.name}
                  &lt;/option&gt;
              );
          })}
      &lt;/Select&gt;
  &lt;/FormControl&gt;
  </code></pre>
  <p>Only want the options after the blank option to be shown when the select is opened on mobile.</p>