InputLabelProps inside Autocomplete is not honored

Viewed 68

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?

0 Answers
Related