MobileDateTimePicker API: Enter date and time with the keyboard

[lukagrbec]

Summary 💡

I'm working with MUI's MobileDateTimePicker and encountering a couple of issues with its functionality. I want users to be able to manually enter a date and time into the TextField. However, the picker dialog currently opens whenever the TextField gains focus, which is not the desired behavior. I want the date and time picker to only appear when the user clicks the calendar/clock icon at the end of the TextField.

Here's a conceptual breakdown of the desired behaviors:

The user clicks on the TextField and is able to type in a date and time directly using the keyboard. The picker dialog (calendar and clock form) should only open when the user clicks the icon on the right side of the text form, not when the TextField itself is clicked or focused. Currently, I am using the standard MobileDateTimePicker implementation, but it seems to lack an option to differentiate between focusing the TextField for keyboard input and clicking the icon to open the picker dialog.

This is my code:

<Controller
      name="start"
      control={control}
      render={({ field: { onChange, value, ...fieldProps } }) => {
        const [open, setOpen] = useState(false);

        const handleIconClick = (event) => {
          event.stopPropagation();
          setOpen(!open); 
        };

        const handleTextFieldFocus = (event) => {
          event.stopPropagation();
        };

        return (
          <MobileDateTimePicker
            disabled={user?.enterprise}
            open={open}
            onOpen={() => setOpen(true)}
            onClose={() => setOpen(false)}
            value={value ? new Date(value) : null}
            onChange={(newValue) => {
              onChange(newValue ? fTimestamp(newValue) : newValue);
            }}
            label="Začetek"
            format="dd/MM/yyyy HH:mm"
            ampm={false}
            slots={{
              OpenPickerIcon: () => <></>, 
            }}
            slotProps={{
              textField: {
                inputRef: fieldProps.ref,
                onFocus: handleTextFieldFocus,
                fullWidth: true,
                InputProps: {
                  ...fieldProps.InputProps,
                  endAdornment: (
                    <IconButton onClick={handleIconClick} size="large">
                      <Iconify icon='solar:calendar-mark-bold-duotone' />
                    </IconButton>
                  ),
                },
              },
            }}
          />
        );
      }}
    />

Examples 🌈

Desired Behavior: I want to enable users to input the date and time manually through the keyboard when they click on the TextField. The picker dialog should only open when the user clicks on the calendar/clock icon adjacent to the TextField:

Motivation 🔦

Currently, I am using the standard MobileDateTimePicker implementation, but it seems to lack an option to differentiate between focusing the TextField for keyboard input and clicking the icon to open the picker dialog.

Search keywords: MobileDateTimePicker, keyboard input

[alexfauquette]

That's because you're using the <MobileDateTimePicker />. The <DesktopDateTimePicker /> has the behavior you're describing. And the <DateTimePicker /> switch between them depending on the cursor precision of your user device.

[flaviendelangle]

The only problem here is that the DesktopDateTimePicker will open in a popper instead of a modal and with a desktop layout. Right now you can't open the mobile view in a modal using an adornment to keep the field editing.

I think it duplicates #7869