[pickers] Change DateRangePicker popper anchor element

[david-ic3]

The problem in depth 🔍

We are using a Range Date Picker where the start and end dates are one below the other one.

You can check the example in CodeSandBox ( link ) .

The issue is than when you open the DateRangeCalendar, click in 'check-in' input . The Calendar overlaps the check-out input div.

Is there a way to position the Popper below the check-out div ?

Your environment 🌎

No response

Search keywords: DatePicker popper position
Order ID: #19458

[LukasTy]

Hello @david-ic3
What do you think about such a solution?
It's not the prettiest thing in the world but seems to work. 🤔

However, I'd advise rethinking your UX strategy because such a solution produces unwanted layout shifting after date selection.
You could consider specifying the end field as the anchorEl to avoid the layout shifting.
Please note the change of where the direction: "column" is specified—it avoids the unwanted change in layout/padding.

[david-ic3]

@LukasTy , thanks that works. If we would like to fix it to the after date anchor, I agree is a better option , could we do it without the useMemo's ?

[LukasTy]

@david-ic3 Here is an example with statically setting the anchorEl to the end field.
I'm adding a waiting for 👍 label on this issue to understand if there is more need for an easier and more appropriate solution for changing the anchorEl. 😉

[david-ic3]

@LukasTy , works like a charm, thanks

[LukasTy]

works like a charm, thanks

I'm glad to hear it, but it's still not the most proper and clean solution, that's why I'm reopening this issue to give the opportunity to discuss it among the team and also wait for confirmation of how relevant this is via the 👍. 😉