[pickers] text field loses focus on third click

[kcsujeet]

Steps to reproduce

Steps:

1. Open this link to live example: https://codesandbox.io/p/sandbox/2qvrmz
2. Click on time picker 3 times
3. Verify that on third time, the picker closes

Screen.Recording.2025-04-01.at.5.10.49.PM.mov

Current behavior

The field loses focus even though it has focus

Expected behavior

The field should not lose focus on any interaction with it.

Context

No response

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: timepicker, textfield, focus, click

[michelengelen]

This is due to the way the focus-management is built around the pickers.
When opening a picker it will move the focus there and blur the field.

May I ask what your intentions are? What's the preferred way for you implementation to look like/work?

[kcsujeet]

Hi @michelengelen ... Thank you for the reply. I'm looking to make it open on click in the input and keep it editable while the picker is open.

Ideally, a timepicker with autocomplete would be awesome. Similar to google calendar. It's more easier and intuitive. A prop variant="autocomplete" would be ideal.

Screen.Recording.2025-04-02.at.10.18.07.AM.mov

[michelengelen]

ah, i get it ... for a first iteration you can do this:

import * as React from 'react';
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { TimePicker } from '@mui/x-date-pickers/TimePicker';

export default function BasicTimePicker() {
  const [open, setOpen] = React.useState(false);
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['TimePicker']}>
        <TimePicker
          open={open}
          label="Basic time picker"
          autoFocus={false}
          slotProps={{ textField: { onClick: () => setOpen(true) } }}
        />
      </DemoContainer>
    </LocalizationProvider>
  );
}

We do not have a way of mimickng autocomplete though.

[kcsujeet]

I have something like that in the sandbox link I provided. It's not working. Having the problem I mentioned.

An Autocomplete picker similar to google calendar would be awesome.I don't wanna create it myself because then I'll have to maintain it.

Are there any plans for this?

[michelengelen]

I have something like that in the sandbox link I provided. It's not working. Having the problem I mentioned.

It works for me ... the important part is autoFocus={false}, because that's what prevents the picker overlay to steal focus from the input field.

An Autocomplete picker similar to google calendar would be awesome.I don't wanna create it myself because then I'll have to maintain it.

Are there any plans for this?

No, not at the moment I am afraid.

[kcsujeet]

Thanks @michelengelen ... It seems to work for opening. How to handle closing of picker? ... I tried onClose={() => setIsOpen(false)} but it causes the picker to close on subsequent click, which is expected because technically the click is outside of picker itself.

Screen.Recording.2025-04-03.at.10.38.14.AM.mov

[michelengelen]

Well, you can always pass this:

onAccept={() => setOpen(false)}

But the overlay will stay open until you actually accept. You can have a workaround that handles the closing on click away by listening for click events on the components (using refs) and closing if the click target is not on the overlay or textfield.