How to add/edit function to the clear button icon in Material UI Autocomplete?

Question

I have the code below

                   <Autocomplete
                        id='combo-box-demo'
                        options={companies}
                        getOptionLabel={getOptionLabel}
                        renderInput={params => (
                            <TextField {...params} variant='outlined' />
                        )}
                        onChange={(event, newValue) => onCompanyChange(event, newValue)}
                    />

I want to customized the function when I clicked on the clear button in the autocomplete input. I need to ask the user if they really wants to clear the field first. Is it possible to target the .MuiAutocomplete-clearIndicator so I can add more function on it? Thank is advance!

Answer 1

const onCompanyChange = (event, value, reason) => {
 if(reason === "clear")
    confirm("Are you sure to clear?"); // or you can open Dialog here
 
 //other codes go here like setting the value of input
};

<Autocomplete
             id='combo-box-demo'
             options={companies}
             getOptionLabel={getOptionLabel}
             renderInput={params => (
                           <TextField {...params} variant='outlined' />
                         )}
             onChange={onCompanyChange}
             />