Skip to content

[DateRangePicker] Fix disabled filler cells showing the range highlight - #23293

Merged
JCQuintas merged 2 commits into
mui:masterfrom
JCQuintas:fix-range-filler-cell-highlight
Aug 5, 2026
Merged

[DateRangePicker] Fix disabled filler cells showing the range highlight#23293
JCQuintas merged 2 commits into
mui:masterfrom
JCQuintas:fix-range-filler-cell-highlight

Conversation

@JCQuintas

@JCQuintas JCQuintas commented Aug 5, 2026

Copy link
Copy Markdown
Member

Fixes #23289

A filler cell (a day of the neighbouring month rendered to pad the grid) is hidden with opacity: 0. The disabled styling of the selection variants (&.Mui-disabled { opacity: 0.6 }) is a compound selector, so it has a higher specificity and won over that rule. A filler cell that was both disabled (through shouldDisableDate) and inside the selected range was therefore painted as a range-highlighted cell with no day number, leaving a visual gap in the row.

Filler cells no longer receive any selection or preview owner state, which restores the behavior v8 had through shouldRenderHighlight = isHighlighting && !outsideCurrentMonth. That guard was dropped in #21739 when DateRangePickerDay2 replaced DateRangePickerDay.

Before

before

After

after

@JCQuintas
[pickers] Fix disabled filler cells showing the range highlight
4344de3 
Filler cells are hidden with `opacity: 0`, but the disabled styling of the
selection variants (`opacity: 0.6`) has a higher specificity and won over it.
A filler cell that was disabled and inside the selected range was rendered as
a highlighted cell with no day number.

Filler cells no longer receive any selection or preview owner state.
@JCQuintas JCQuintas added type: regression A bug, but worse, it used to behave as expected. scope: pickers Changes related to the date/time pickers. labels Aug 5, 2026
@JCQuintas JCQuintas self-assigned this Aug 5, 2026
@code-infra-dashboard

code-infra-dashboard Bot commented Aug 5, 2026 •
edited
Loading

Copy link
Copy Markdown

Deploy preview

https://deploy-preview-23293--material-ui-x.netlify.app/
QR code for https://deploy-preview-23293--material-ui-x.netlify.app/

Bundle size

Bundle Parsed size Gzip size
@mui/x-data-grid 0B(0.00%) 0B(0.00%)
@mui/x-data-grid-pro 0B(0.00%) 0B(0.00%)
@mui/x-data-grid-premium 0B(0.00%) 0B(0.00%)
@mui/x-charts 0B(0.00%) 0B(0.00%)
@mui/x-charts-pro 0B(0.00%) 0B(0.00%)
@mui/x-charts-premium 0B(0.00%) 0B(0.00%)
@mui/x-date-pickers 0B(0.00%) 0B(0.00%)
@mui/x-date-pickers-pro 🔺+28B(+0.01%) 🔺+31B(+0.04%)
@mui/x-tree-view 0B(0.00%) 0B(0.00%)
@mui/x-tree-view-pro 0B(0.00%) 0B(0.00%)
@mui/x-scheduler 0B(0.00%) 0B(0.00%)
@mui/x-scheduler-premium 0B(0.00%) 0B(0.00%)
@mui/x-chat 0B(0.00%) 0B(0.00%)
@mui/x-license 0B(0.00%) 0B(0.00%)

Details of bundle changes

Check out the code infra dashboard for more information about this PR.

@JCQuintas
JCQuintas marked this pull request as ready for review August 5, 2026 13:09
noraleonte
noraleonte approved these changes Aug 5, 2026
View reviewed changes

@noraleonte noraleonte left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

LGTM! 👌 🙏

@JCQuintas
JCQuintas merged commit b3f5900 into mui:master Aug 5, 2026
22 checks passed
@JCQuintas
JCQuintas deleted the fix-range-filler-cell-highlight branch August 5, 2026 13:19
LukasTy
LukasTy reviewed Aug 5, 2026
View reviewed changes

@LukasTy LukasTy left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Nice fix, thanks for looking at it. 🙏
However, I'm not sure it's the best visual look, WDYT @noraleonte?

v8 looks

Image

this PR

Image

@LukasTy LukasTy added plan: Pro Impact at least one Pro user. component: DateRangePicker The React component labels Aug 5, 2026
@LukasTy LukasTy changed the title [pickers] Fix disabled filler cells showing the range highlight [DateRangePicker] Fix disabled filler cells showing the range highlight Aug 5, 2026
@noraleonte

noraleonte commented Aug 5, 2026

Copy link
Copy Markdown
Contributor

Hmm, I agree that it's not looking ideal. It is however technically correct because it applies the disabled styles the highlighted area would have if the calendar was disabled.

Disabled certain dates:
image
Disable all:
image

I see two options here:

  1. go with the technically correct way 🫠
  2. differentiate between the
    a. entire range being disabled -> applies opacity:0.6
    b. certain dates being disabled -> only impacts text and leaves bg color alone

I vote 2

@JCQuintas

JCQuintas commented Aug 5, 2026

Copy link
Copy Markdown
Member Author

@noraleonte I think @LukasTy mentioned the rounded corners on the end/start of month 🤔
Although your point is also valid

@noraleonte

noraleonte commented Aug 5, 2026

Copy link
Copy Markdown
Contributor

Fair point 🤣
But btw, both issues are present on mui.com, so this PR didn't introduce them
image

image

It did however fix the weird visual bug 👌
image

I think we can tackle both in a follow-up ❤️

@JCQuintas JCQuintas mentioned this pull request Aug 5, 2026
Merged
@LukasTy

LukasTy commented Aug 5, 2026

Copy link
Copy Markdown
Member

@noraleonte I think @LukasTy mentioned the rounded corners on the end/start of month 🤔 Although your point is also valid

No, I was referring to the visual style of the disabled days (opacity) in the selected range.
Rounded corners on the end and start of selected month are a correct change in v9, it's the same on Material Design and Angular MD AFAIK.
In v8 they do not get a reduced opacity, while on v9 it is the case.
So, it's mostly a visual concern of how we want it to look like.
If you don't see it as an issue, I won't park the release PR over this any longer. 👌

@LukasTy

LukasTy commented Aug 5, 2026

Copy link
Copy Markdown
Member

Rounded corners on the end and start of selected month are a correct change in v9, it's the same on Material Design and Angular MD AFAIK.

On a 2nd note, scratch that, looks like Angular MD does show a square for the last day in the month for ranges spanning multiple months...
https://stackblitz.com/edit/kc6yush1?file=src%2Fexample%2Fdate-range-picker-overview-example.ts
Screenshot 2026-08-05 at 17 42 24

However, MD2 examples show the ending and starting days rounded off.
https://m2.material.io/components/date-pickers#desktop-pickers

Combining the 2 above cases, if we would like to not deviate too much from those behaviors, it means that we need to alter the visual disabled selected day behavior.

What are your thoughts, @noraleonte?

@JCQuintas JCQuintas mentioned this pull request Aug 7, 2026
Merged
This was referenced Aug 12, 2026
Closed
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@LukasTy LukasTy LukasTy left review comments
@noraleonte noraleonte noraleonte approved these changes
@MBilalShafi MBilalShafi Awaiting requested review from MBilalShafi

Assignees

@JCQuintas JCQuintas

Labels

component: DateRangePicker The React component plan: Pro Impact at least one Pro user. scope: pickers Changes related to the date/time pickers. type: regression A bug, but worse, it used to behave as expected.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[DateRangeCalendar] Selected range breaks when using shouldDisableDate

3 participants

@JCQuintas @noraleonte @LukasTy