search

mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
4.52k stars 1.31k forks source link

[pickers] The date picker shouldn't steal the focus when closing #13332

Open oliviertassinari opened 5 months ago

oliviertassinari commented 5 months ago

Steps to reproduce

Link to live example: (required)

Steps:

  1. Open https://mui.com/x/react-date-pickers/#overview
  2. And voila:

https://github.com/mui/mui-x/assets/3165635/fbe1e6d2-cf08-4898-be80-f62392f2d468

Current behavior

The focus is moved back to the button that was clicked to open the popup.

Expected behavior

The focus stays on the new target

Context

I think that https://ui.shadcn.com/docs/components/date-picker behaves correctly for comparison.

Your environment

@mui/x-pickers v7.6.1

Search keywords: -

michelengelen commented 5 months ago

I suspected FocusTrap to be the issue at first, but the DateRangePicker is using PickersPopper as well and it does close as expected when blurring, so that cannot be the case. 🤔

oukunan commented 5 months ago

@michelengelen is related on this useEffect? https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/internals/components/PickersPopper.tsx#L377-L378

LukasTy commented 5 months ago

This is a great issue and thanks @oukunan, that's indeed the problematic location. 👌 I have an idea of how to fix it. 😉

LukasTy commented 5 months ago

Looking at this I've discovered an even bigger problem with DateRangePicker. Due to it over-utilizing event.stopPropagation, opening it doesn't cause other Pickers to close. 🙈