title: How to make autocomplete field of material UI required?
body: <p>I have tried a couple of ways in order to make the material UI's autocomplete field of type required but I am not getting the behavior that I wanted. I had encapsulated my field inside react hook form <code>&lt;Controller/&gt;</code> yet no luck. I want to trigger message 'Field is mandatory' on submit when nothing is added to the field.</p>
  <p>Below is the code snippet, I have not removed comments so that it becomes a bit easier for others to understand the approach that I had followed earlier -</p>
  <pre><code>  &lt;Controller
          name=&quot;displayName&quot;
          as={
            &lt;Autocomplete 
                    value={lists}
                    multiple
                    fullWidth
                    size=&quot;small&quot;
                    limitTags={1}
                    id=&quot;multiple-limit-lists&quot;
                    options={moduleList}
                    getOptionLabel={(option) =&gt; option.displayName}
                    renderInput={(params,props) =&gt; {
                     return (
                        &lt;div&gt;
                          &lt;div className=&quot;container&quot;&gt;
                            &lt;TextValidator {...params} variant=&quot;outlined&quot; label=&quot;Display Name*&quot; className=&quot;Display Text&quot; 
                              name=&quot;displayName&quot;  id=&quot;outlined-multiline-static&quot; 
                              placeholder=&quot;Enter Display-Name&quot; size=&quot;small&quot;
          onChange={handleDisplay}
           // validators={['required']} this and below line does throw a validation but the problem is this validation stays on the screen when user selects something in the autocomplete field which is wrong.
          // errorMessages={['This field is required']} 
          // withRequiredValidator
          
                              /&gt;
                          &lt;/div&gt;
                        &lt;/div&gt;
                      )
                    }}
                    /&gt;
          }
          // onChange={handleDisplay}
          control={control}
          rules={{ required: true }}
          // required
          // defaultValue={options[0]}
          /&gt;
          &lt;ErrorMessage errors={errors} name=&quot;displayName&quot; message=&quot;This is required&quot; /&gt;
  
  </code></pre>