Material-ui: [Autocomplete] Clear button does not disappear when the input is cleaned manually

[Aerowiel]

The clear button inside the input (the button used to clear the input) is displayed even if the input is empty (only if you clear it manually not using the button)

• [x] The issue is present in the latest release.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

The clear button is displayed even if the input is empty

Expected Behavior 🤔

The clear button should not be displayed if the input is empty.

Steps to Reproduce 🕹

Steps:

1. Create a Autocomplete component with freeSolo bool to true

<Autocomplete
                      freeSolo
                      autoHighlight
                      options={fins.map(fin => fin.name)}
                      value={values.fin}
                      onChange={(event, newValue) => {
                        handleChange({target:{
                          name: "fin",
                          value: newValue,
                        }})
                      }}
                      onInputChange={(event, newValue) => {
                        handleChange({target:{
                          name: "fin",
                          value: newValue,
                        }})
                      }}
                      renderInput={params => (
                        <TextField
                          {...params}
                          required
                          fullWidth
                          className={classes.textField}
                          name="fin"
                          label="FIN"
                          type="text"
                          margin='normal'
                          error={errors.fin ? true : false}
                          helperText={errors.fin}
                        />
                      )}
                    />

1. Write anything in the input
2. Delete manually by using "suppr" button on your keyboard
3. Notice that the clear button is displayed even if the input is empty

SOLUTION 🔦

Check if the value is an empty string OR null, atm the Autocomplete component is only checking if the input value is null...

Your Environment 🌎

The environment is not important here obv.

| Tech | Version |
| ----------- | ------- |
| Material-UI | v4.8.0 |
| React | v16.12.0 |
| Browser | Chrome latest version |
| TypeScript | NO |
| etc. | |

[AlfredoGJ]

@Aerowiel it looks like this has more to do with the value prop than the freeSolo mode. When you set the value prop and then you try to clear the value means the keyboard or the clear button it clears the text but internally the component keeps the previous value. Using freeSolo or not. This happens in the multiple select mode too.

You can see this here: https://codesandbox.io/s/select-in-appbar-ixwq4

I think that the user must be able to change the value of the autocomplete component although it was set in with the value prop. but I don't know. Is this the expected behavior @oliviertassinari ?

[oliviertassinari]

@Aerowiel It seems that you are not using the controllable API correctly.
@AlfredoGJ Your example looks OK. You can ask on StackOverflow how to get the behavior you desire. tip: check the concept of controllable/uncontrolled component out.