I am trying t make the label is selectable and copyable inside Autocomplete component by setting InputLabelProps={{ sx: { userSelect: "text" } }} inside renderInput. Ideally, I hope I can click or double click to select the label text.
export default function ComboBox() {
return (
<Autocomplete
disablePortal
id="combo-box-demo"
options={top100Films}
sx={{ width: 300 }}
renderInput={(params) => (
<TextField
{...params}
InputLabelProps={{ sx: { userSelect: "text" } }}
label="Movie Name Selection"
/>
)}
/>
);
}
But as it shows here: https://codesandbox.io/s/determined-keller-li1jz7?file=/demo.js:136-508, it is not working.
I even changed it globally and still no luck:
const theme = createTheme({
components: {
MuiInputLabel: {
styleOverrides: {
root: {
userSelect: "text"
}
}
}
}
});
Anyone knows why?