title: Why do I have to click TextField twice in order for my list to display?
body: <p>I updated from @material-ui/core@v4.9.1 to @material-ui/core@v4.11.0. Since doing so All of my TextFields have to be clicked twice in order for the lists to display. The issue doesn't seem to be related to the update in version because if switch back to the v4.9.1 version the problem persists.</p>
  <p>package.json</p>
  <pre><code>&quot;dependencies&quot;: {
      &quot;@material-ui/core&quot;: &quot;4.10.2&quot;,
      &quot;@material-ui/icons&quot;: &quot;^4.9.1&quot;,
      &quot;@material-ui/styles&quot;: &quot;^4.4.1&quot;,
  </code></pre>
  <p>.js file</p>
  <pre><code>    let getBoards = () =&gt; {
      const client = new GraphQLClient(url, {
        headers: {
          Authorization: token,
        },
      })
  
      const query = `{
          boards() {
              id
              name
              owner {
                  id
                  name
              }
          }
      }`
  
      client.request(query)
        .then(data =&gt; {
          console.log('data: ', data)
          let tempArray = [];
  
          for (let i = 0; i &lt; data.boards.length; i++) {
            if (data.boards[i].name.indexOf('INT') &gt; -1) {
              tempArray.push({
                id: data.boards[i].id,
                name: data.boards[i].name
              })
            }
          }
  
          let compare = (a, b) =&gt; {
            // Use toUpperCase() to ignore character casing
            const nameA = a.name.toUpperCase();
            const nameB = b.name.toUpperCase();
  
            let comparison = 0;
            if (nameA &gt; nameB) {
              comparison = 1;
            } else if (nameA &lt; nameB) {
              comparison = -1;
            }
            return comparison;
          }
  
          setBoards(tempArray.sort(compare));
        })
    }
  
      &lt;TextField
        required
        error={state.typeErrorBoard}
        select
        label=&quot;Select board&quot;
        className={props.classes.textField}
        variant=&quot;filled&quot;
        value={state.BoardName}
        onClick={getBoards}
        onChange={e =&gt; handleBoardChange(e)}
        margin=&quot;dense&quot;
      &gt;
        {boards.map((board, index) =&gt;
          &lt;MenuItem
            key={index}
            value={board.name}
          &gt;
            {board.name}
          &lt;/MenuItem&gt;
        )}
      &lt;/TextField&gt;
  </code></pre>