Menu
I'm new to react-virtualization and Autocomplete. I have currently build a list which shows multiple texts when the checkbox is selected. Here is my code: https://codesandbox.io/s/material-demo-forked-1qzd3?file=/demo.tsx
I want to show only one text when anything is selected from the list and also remove the clear button and grey background attached to it.
587
To clear an input field with React, we can set the value of the value attribute to an empty string. We create the val state with the useState hook. Then we set the value prop of the input to the val state. Next we set the onClick prop of the button to a function that calls setVal to an empty string.
The Material-UI Autocomplete component and its Popper component can be styled by targeting built-in MUI styling APIs. The Popper is also called a dropdown or listbox. The difference is that Popper is the positioning element while Listbox is the visible list element.
clearOnBlur={true} helps to clear the value of the autocomplete component when it loses focus.
There is a dedicated prop to disable the Icon.
try the prop "disableClearable" on the Autocomplete component
it is here in the documentation:
<Autocomplete
{...defaultProps}
id="disable-clearable"
disableClearable
renderInput={(params) => <TextField {...params} label="disableClearable"
margin="normal" />}
/>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With