readOnly MobileDatePicker не работает в MUI v5

Question

Флаг для MUI MobileDatePicker не работает. API не влияет на onClickфункциональность. Единственный обходной путь - использовать отключенный флаг. Однако мы используем оба readOnlyи отключенные функции для разных случаев использования. Любая помощь приветствуется.

      <MobileDatePicker
  label="Date mobile"
  disableOpenPicker
  inputFormat="MM/dd/yyyy"
  value={value}
  readOnly
  onChange={handleChange}
  renderInput={(params) => (
    <TextField {...params} InputProps={{ readOnly: true }} />
  )}
/>

Answer 1

Похоже, что внутренняя часть предназначена только для чтения, а средство выбора - нет, и вы можете открыть средство выбора, щелкнув TextField. Простой обходной путь - всегда устанавливать open заявить false чтобы сборщик не открывался:

      <MobileDatePicker readOnly open={false}

Если вам нужно изменить readonly значение динамически:

      function EnhancedMobileDatePicker(props) {
  const [open, setOpen] = React.useState(false);
  const { readOnly } = props;

  React.useEffect(() => {
    // do not auto open picker after setting readOnly to false
    if (!readOnly) setOpen(false);
  }, [readOnly]);

  return (
    <MobileDatePicker
      {...props}
      readOnly={readOnly}
      open={readOnly ? false : open}
      onOpen={() => setOpen(true)}
      onClose={() => setOpen(false)}
    />
  );
}