title: Blur Material UI Select component on the onChange event
body: <p>By default MaterialUI's Select component leaves itself focused after selecting an option. This behaviour can be seen in all their examples in their <a href="https://material-ui.com/components/selects/" rel="nofollow noreferrer">docs</a></p>
  <p>I would like the element to blur once something is selected. Here is what my code currently looks like:</p>
  <pre class="lang-js prettyprint-override"><code>const App = () =&gt; {
      const [selectedValue, setSelectedValue] = useState('')
  
      const selectElement = useRef(null);
  
    return (
          &lt;Select
              native
              ref={selectElement}
              value={selectedValue}
              onChange={(evt) =&gt; {
                  setSelectedValue(evt.target.value)
  
                  // Attempt at blurring the element upon selection using the useRef:
                  selectElement.current.blur(); // Nothing happens
  
                  // Attempt at blurring the element upon selection using activeElement:
                  document.activeElement.blur(); // Get Error: &quot;Property 'blur' does not exist on type 'Element'.&quot;
              }}
          &gt;
              &lt;option value='option 1'&gt;Option 1&lt;/option&gt;
              &lt;option value='option 2'&gt;Option 2&lt;/option&gt;
              &lt;option value='option 3'&gt;Option 3&lt;/option&gt;
          &lt;/Select&gt;
    );
  };
  </code></pre>
  <p>As you can see in the code, I've tried to do this with two different methods I've found:</p>
  <ul>
  <li><p>Through <code>useRef()</code>: this does nothing, no errors or anything, but does not blur my element</p>
  </li>
  <li><p>Through the <code>document.activeElement</code>: this gives me an error, apparently property <code>blur</code> does not exist on type element.</p>
  </li>
  </ul>
  <p>What is the proper method of blurring my Select component upon selecting an option?</p>