We try to implement the autocomplete text field. The clear and popup icon always appears from the right side (end adornment).
We have an option to work with rtl direction and we can't find a way to flip this component:
Is anyone found a way to do this?
The clear and popup icon buttons of Autocomplete is hardcoded in endAdornment prop, there is no way to change that using the public API, but you can swap it by using this workaround:
export default function Demo() {
return (
<Autocomplete
options={top100Films.map((option) => option.title)}
renderInput={(params) => {
return (
<TextField
{...params}
InputProps={{
...params.InputProps,
startAdornment: (
<div>{params.InputProps.endAdornment.props.children}</div>
),
endAdornment: null
}}
label="freeSolo"
/>
);
}}
/>
);
}
