[pickers] DatePicker Popper is losing ref position (x,y) after setting a value (keyboard)

[MorMeshulam]

Order ID or Support key 💳 (optional)

3453

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

The problem in depth 🔍

I am trying to use the new version 6.7 of x-date-picker-pro and i am having an issue with
the popper that losing its relative position after setting a value.
my case ->
i am manipulating the component to be able to use both popper and input at the same time (i saw that is not the native behavior) by calling inputRef.current.focus() inside onOpen event.

This is my current implementation when i am using v5 and TextInput ->

Screen.Recording.2023-06-13.at.12.53.06.mov

This is my the new v6 with DateField (The issue) ->

Screen.Recording.2023-06-13.at.12.52.38.mov

is there any way to work with the DateField and keep the popper opened ?

Your environment 🌎

`npx @mui/envinfo`

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

[LukasTy]

Could you please provide a minimal reproduction case to showcase the problem you are having?
I've tried replicating your use case and it seems to work somewhat close to how you are expecting, given your video comparisons.

[MorMeshulam]

Whenever you try to make the popper visible while typing in the input field,
will make that happens.
i doing it by manipulating the open value + set focus to the inputRef.

i think that the component doesn't support that use case.
from what i see on the MUI native DatePicker demo is a way that you can,
open the picker by clicking the icon OR use the DateField inline edit by focusing the field,
but no way to type and see the calendar popper.

am i missing something?
is it possible ?

this is a very common Date picking use case .
i will appreciate your help.

[LukasTy]

What you are describing is not supported by our pickers out of the box.
We are following a11y guidelines in regards to the interaction behavior.

Although I've tried hacking around and based on your description, it seems that this demo does cover the use case you are describing. 🤔
We would still suggest strongly considering the a11y implications that this behavior would incur.

[MorMeshulam]

Thanks, your code example helped me to figure it out!

i used both textField and field (i needed field in order to manipulate sections)
apparently when you use the, both it is breaking the focus.

textField: {
value,
inputProps: renderInputProps(),
InputProps: { endAdornment: renderClearButton(value, onClear) },
label: renderLabel(),
onKeyDown,
},
// field: {
// selectedSections,
// onSelectedSectionsChange,
// unstableFieldRef: fieldRef,
// },

[MorMeshulam]

is it possible or even right to use them both?

just add ->

field: {
onSelectedSectionsChange: () => {}
}

to you code example and it is not working anymore

[LukasTy]

I will kindly ask you to provide a codesandbox example, where something is not working.
I tried adding the mentioned snippet and to me, it did not seem that anything has changed. I'd start by asking a different question: why are you trying to control the selected sections? Your use case does not seem to require it.

In regards to the problem shown in the video, consider checking #9285 as it also showcased a similar problem and the root cause was an issue of forgetting to forward original textField.InputProps containing the relevant ref.

[MorMeshulam]

thanks,
i need to catch the year section change.
when the user type 23 on the year section i am making it to be 2023 by clicking enter/tab.
i found the best way of doing it is with the use of onSelectedSectionsChange

i think i am ok now.
thanks a lot for your help.
next time i will provide sandbox example.

[LukasTy]

Closing the issue as there does not seem to be any more open questions left to answer.
Feel free to re-open the issue or create a new one otherwise. 👌