Skip to content

[pickers] Fix popper click-away behavior #18804

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 3 commits into from
Jul 28, 2025
Merged

[pickers] Fix popper click-away behavior #18804

merged 3 commits into from
Jul 28, 2025

Conversation

LukasTy
Copy link
Member

@LukasTy LukasTy commented Jul 15, 2025 •
edited
Loading

Noticed it while working on: #13434.
I feel like this is a prerequisite for the above. 👍
This has always been a problem due to our custom PickerPopper implementation. 🙈

After selecting a value in a Picker (DatePicker, DateTimePicker, or other Picker using PickerDay) with keyboard (Enter), clicking away does not close the Picker after the first click a second click is needed.

Before

Screen.Recording.2025-07-15.at.09.20.30.mov

After

Screen.Recording.2025-07-15.at.09.53.15.mov

@LukasTy LukasTy self-assigned this Jul 15, 2025
@LukasTy LukasTy added type: bug It doesn't behave as expected. scope: pickers Changes related to the date/time pickers. labels Jul 15, 2025
@mui-bot
Copy link

mui-bot commented Jul 15, 2025 •
edited
Loading

Deploy preview: https://deploy-preview-18804--material-ui-x.netlify.app/

Bundle size report

Total Size Change: ▼-62B(0.00%) - Total Gzip Change: 🔺+209B(+0.01%)
Files: 122 total (0 added, 0 removed, 71 changed)

Show details for 100 more bundles (22 more not shown)

@mui/x-date-pickers-pro/AdapterDayjs parsed: 🔺+293B(+3.60%) gzip: 🔺+80B(+3.12%)
@mui/x-date-pickers/AdapterDayjs parsed: 🔺+293B(+3.60%) gzip: 🔺+80B(+3.12%)
@mui/x-date-pickers parsed: 🔺+50B(+0.02%) gzip: 🔺+23B(+0.04%)
@mui/x-date-pickers-pro parsed: 🔺+50B(+0.02%) gzip: 🔺+24B(+0.03%)
@mui/x-date-pickers-pro/DateRangePicker parsed: 🔺+25B(+0.01%) gzip: 🔺+13B(+0.02%)
@mui/x-date-pickers-pro/DateRangePickerDay parsed: 🔺+25B(+0.10%) gzip: 🔺+10B(+0.13%)
@mui/x-date-pickers-pro/DateTimeRangePicker parsed: 🔺+25B(+0.01%) gzip: 🔺+7B(+0.01%)
@mui/x-date-pickers-pro/DesktopDateRangePicker parsed: 🔺+25B(+0.01%) gzip: 🔺+16B(+0.03%)
@mui/x-date-pickers-pro/DesktopDateTimeRangePicker parsed: 🔺+25B(+0.01%) gzip: 🔺+8B(+0.01%)
@mui/x-date-pickers/DatePicker parsed: 🔺+25B(+0.02%) gzip: 🔺+9B(+0.02%)
@mui/x-date-pickers/DateTimePicker parsed: 🔺+25B(+0.01%) gzip: 🔺+27B(+0.05%)
@mui/x-date-pickers/DesktopDatePicker parsed: 🔺+25B(+0.02%) gzip: 🔺+11B(+0.02%)
@mui/x-date-pickers/DesktopDateTimePicker parsed: 🔺+25B(+0.01%) gzip: 🔺+22B(+0.04%)
@mui/x-date-pickers/PickerDay2 parsed: 🔺+25B(+0.26%) gzip: 🔺+12B(+0.32%)
@mui/x-date-pickers/PickersDay parsed: 🔺+25B(+0.26%) gzip: 🔺+10B(+0.27%)
@mui/x-date-pickers-pro/DateRangeCalendar parsed: 🔺+1B(0.00%) gzip: 🔺+4B(+0.02%)
@mui/x-date-pickers-pro/MobileDateRangePicker parsed: 🔺+1B(0.00%) gzip: 🔺+1B(0.00%)
@mui/x-date-pickers-pro/MobileDateTimeRangePicker parsed: 🔺+1B(0.00%) gzip: 🔺+2B(0.00%)
@mui/x-date-pickers-pro/StaticDateRangePicker parsed: 🔺+1B(0.00%) gzip: 🔺+2B(+0.01%)
@mui/x-date-pickers/DateCalendar parsed: 🔺+1B(0.00%) gzip: 🔺+5B(+0.03%)
@mui/x-date-pickers/MobileDatePicker parsed: 🔺+1B(0.00%) gzip: 🔺+3B(+0.01%)
@mui/x-date-pickers/MobileDateTimePicker parsed: 🔺+1B(0.00%) gzip: 🔺+3B(+0.01%)
@mui/x-date-pickers/StaticDatePicker parsed: 🔺+1B(0.00%) gzip: 🔺+5B(+0.02%)
@mui/x-date-pickers/StaticDateTimePicker parsed: 🔺+1B(0.00%) gzip: 🔺+7B(+0.02%)
@mui/x-charts parsed: ▼-24B(-0.01%) gzip: ▼-4B(0.00%)
@mui/x-charts-pro parsed: ▼-24B(-0.01%) gzip: ▼-3B(0.00%)
@mui/x-charts-pro/BarChartPro parsed: ▼-24B(-0.01%) gzip: ▼-2B(0.00%)
@mui/x-charts-pro/ChartContainerPro parsed: ▼-24B(-0.01%) gzip: ▼-5B(-0.01%)
@mui/x-charts-pro/ChartDataProviderPro parsed: ▼-24B(-0.01%) gzip: ▼-7B(-0.01%)
@mui/x-charts-pro/ChartsToolbarPro parsed: ▼-24B(-0.04%) gzip: ▼-4B(-0.02%)
@mui/x-charts-pro/ChartZoomSlider parsed: ▼-24B(-0.02%) gzip: ▼-5B(-0.01%)
@mui/x-charts-pro/FunnelChart parsed: ▼-24B(-0.01%) gzip: ▼-5B(-0.01%)
@mui/x-charts-pro/Heatmap parsed: ▼-24B(-0.01%) gzip: ▼-5B(-0.01%)
@mui/x-charts-pro/LineChartPro parsed: ▼-24B(-0.01%) gzip: ▼-3B(0.00%)
@mui/x-charts-pro/PieChartPro parsed: ▼-24B(-0.01%) gzip: ▼-3B(0.00%)
@mui/x-charts-pro/RadarChartPro parsed: ▼-24B(-0.01%) gzip: ▼-5B(-0.01%)
@mui/x-charts-pro/ScatterChartPro parsed: ▼-24B(-0.01%) gzip: ▼-3B(0.00%)
@mui/x-charts/BarChart parsed: ▼-24B(-0.01%) gzip: ▼-3B(0.00%)
@mui/x-charts/ChartContainer parsed: ▼-24B(-0.02%) gzip: ▼-5B(-0.01%)
@mui/x-charts/ChartDataProvider parsed: ▼-24B(-0.02%) gzip: ▼-5B(-0.01%)
@mui/x-charts/Gauge parsed: ▼-24B(-0.02%) gzip: ▼-4B(-0.01%)
@mui/x-charts/LineChart parsed: ▼-24B(-0.01%) gzip: ▼-3B(0.00%)
@mui/x-charts/PieChart parsed: ▼-24B(-0.01%) gzip: ▼-3B(0.00%)
@mui/x-charts/RadarChart parsed: ▼-24B(-0.01%) gzip: ▼-5B(-0.01%)
@mui/x-charts/ScatterChart parsed: ▼-24B(-0.01%) gzip: ▼-5B(-0.01%)
@mui/x-charts/SparkLineChart parsed: ▼-24B(-0.01%) gzip: ▼-3B(0.00%)
@mui/x-charts/Toolbar parsed: ▼-24B(-0.34%) gzip: ▼-4B(-0.13%)
@mui/x-data-grid parsed: ▼-24B(-0.01%) gzip: ▼-8B(-0.01%)
@mui/x-data-grid-premium parsed: ▼-24B(0.00%) gzip: ▼-3B(0.00%)
@mui/x-data-grid-premium/DataGridPremium parsed: ▼-24B(0.00%) gzip: ▼-5B(0.00%)
@mui/x-data-grid-pro parsed: ▼-24B(-0.01%) gzip: ▼-4B(0.00%)
@mui/x-data-grid-pro/DataGridPro parsed: ▼-24B(-0.01%) gzip: ▼-6B(0.00%)
@mui/x-data-grid/DataGrid parsed: ▼-24B(-0.01%) gzip: ▼-9B(-0.01%)
@mui/x-date-pickers-pro/MobileTimeRangePicker parsed: ▼-24B(-0.02%) gzip: ▼-5B(-0.01%)
@mui/x-date-pickers-pro/MultiInputDateRangeField parsed: ▼-24B(-0.03%) gzip: ▼-6B(-0.02%)
@mui/x-date-pickers-pro/MultiInputDateTimeRangeField parsed: ▼-24B(-0.03%) gzip: ▼-6B(-0.02%)
@mui/x-date-pickers-pro/MultiInputTimeRangeField parsed: ▼-24B(-0.03%) gzip: ▼-6B(-0.02%)
@mui/x-date-pickers-pro/SingleInputDateRangeField parsed: ▼-24B(-0.03%) gzip: ▼-4B(-0.02%)
@mui/x-date-pickers-pro/SingleInputDateTimeRangeField parsed: ▼-24B(-0.03%) gzip: ▼-4B(-0.02%)
@mui/x-date-pickers-pro/SingleInputTimeRangeField parsed: ▼-24B(-0.03%) gzip: ▼-6B(-0.02%)
@mui/x-date-pickers/DateField parsed: ▼-24B(-0.03%) gzip: ▼-5B(-0.02%)
@mui/x-date-pickers/DateTimeField parsed: ▼-24B(-0.03%) gzip: ▼-4B(-0.02%)
@mui/x-date-pickers/MobileTimePicker parsed: ▼-24B(-0.02%) gzip: ▼-5B(-0.01%)
@mui/x-date-pickers/PickersTextField parsed: ▼-24B(-0.09%) gzip: ▼-4B(-0.05%)
@mui/x-date-pickers/StaticTimePicker parsed: ▼-24B(-0.04%) gzip: ▼-6B(-0.03%)
@mui/x-date-pickers/TimeClock parsed: ▼-24B(-0.08%) gzip: ▼-5B(-0.05%)
@mui/x-date-pickers/TimeField parsed: ▼-24B(-0.03%) gzip: ▼-4B(-0.02%)
@mui/x-charts/ChartsAxis parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-charts/ChartsAxisHighlight parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-charts/ChartsClipPath parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-charts/ChartsGrid parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-charts/ChartsLabel parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-charts/ChartsLegend parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-charts/ChartsLocalizationProvider parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-charts/ChartsOverlay parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-charts/ChartsReferenceLine parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-charts/ChartsSurface parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-charts/ChartsText parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-charts/ChartsTooltip parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-charts/ChartsXAxis parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-charts/ChartsYAxis parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers-pro/AdapterDateFns parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers-pro/AdapterDateFnsJalali parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers-pro/AdapterLuxon parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers-pro/AdapterMoment parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers-pro/AdapterMomentHijri parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers-pro/AdapterMomentJalaali parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers-pro/DateRangePickerDay2 parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers-pro/DesktopTimeRangePicker parsed: 0B(0.00%) gzip: 🔺+8B(+0.02%)
@mui/x-date-pickers-pro/LocalizationProvider parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers-pro/PickersRangeCalendarHeader parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers-pro/TimeRangePicker parsed: 0B(0.00%) gzip: 🔺+9B(+0.02%)
@mui/x-date-pickers/AdapterDateFns parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers/AdapterDateFnsBase parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers/AdapterDateFnsJalali parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers/AdapterLuxon parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers/AdapterMoment parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers/AdapterMomentHijri parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers/AdapterMomentJalaali parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/x-date-pickers/DayCalendarSkeleton parsed: 0B(0.00%) gzip: 0B(0.00%)

Details of bundle changes

Generated by 🚫 dangerJS against 73a3894

@LukasTy LukasTy requested a review from a team July 15, 2025 09:20
rita-codes
rita-codes approved these changes Jul 28, 2025
View reviewed changes
Copy link
Member

@rita-codes rita-codes left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!
Good catch 🥇

@LukasTy LukasTy merged commit 5d66631 into mui:master Jul 28, 2025
22 checks passed
@LukasTy LukasTy deleted the fix-popper-clickaway-behavior branch July 28, 2025 10:55
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@rita-codes rita-codes rita-codes approved these changes

Assignees

@LukasTy LukasTy

Labels
scope: pickers Changes related to the date/time pickers. type: bug It doesn't behave as expected.
Projects
None yet
Milestone
Date and Time Pickers v8 post stable ...
Development

Successfully merging this pull request may close these issues.
3 participants
@LukasTy @mui-bot @rita-codes