Skip to content

bug(Datepicker): Cannot highlight specific dates with v13 #24383

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
Closed
1 task done
keith-aa opened this issue Feb 8, 2022 · 2 comments · Fixed by #24393
Closed
1 task done

bug(Datepicker): Cannot highlight specific dates with v13 #24383

keith-aa opened this issue Feb 8, 2022 · 2 comments · Fixed by #24393
Assignees
@crisbeto
Labels
area: material/datepicker docs This issue is related to documentation P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@keith-aa
Copy link

keith-aa commented Feb 8, 2022

Is this a regression?

  • Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

Tried running the "Highlighting specific dates" example from https://material.angular.io/components/datepicker/overview on Stackblitz. It would not highlight. Also, tried downloading the example and updating to latest release. It still did not work.

Expected
highlighted

Actual
not-highlighted-as-expected

Reproduction

Steps to reproduce:

  1. Download angular-date-class-filter-13.zip
  2. Extract zip file.
  3. npm install
  4. ng serve --port 4000
  5. Open browser to port 4000
  6. Click calendar icon

Expected Behavior

Expected to see the 1st and 20th highlighted.
highlighted

Actual Behavior

Neither day is highlighted.
not-highlighted-as-expected

Environment

C:\Temp\examples\angular-date-class-filter-13>ng version

Angular CLI: 13.2.2
Node: 16.13.2
Package Manager: npm 8.1.2
OS: win32 x64

Angular: 13.2.2
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.1302.2
@angular-devkit/build-angular 13.2.2
@angular-devkit/core 13.2.2
@angular-devkit/schematics 13.2.2
@angular/cdk 13.2.1
@angular/material 13.2.1
@schematics/angular 13.2.2
rxjs 7.4.0
typescript 4.4.4
@keith-aa keith-aa added the needs triage This issue needs to be triaged by the team label Feb 8, 2022
@crisbeto
Copy link
Member

crisbeto commented Feb 9, 2022

The class does get assigned correctly. The problem appears to be that the background: none added in the following change has a higher specificity and overrides the background from the custom class. 43db844#diff-c9da88d358126fd9af0bcfe70ca9dce66f53916557502d2e817772d860c9822cR48

crisbeto added a commit to crisbeto/material2 that referenced this issue Feb 10, 2022
@crisbeto
docs(material/datepicker): fix custom class example
d7b09c0 
The changes in angular#24171 added a `background: none` to the datepicker cell which broke one of the examples, because it increased the specificity. I don't think that there's a good way to reduce the specificity without moving the entire cell template around again so these changes update the example to be more specific.

Fixes angular#24383.
@crisbeto crisbeto added area: material/datepicker docs This issue is related to documentation has pr P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent and removed needs triage This issue needs to be triaged by the team labels Feb 10, 2022
@crisbeto crisbeto self-assigned this Feb 10, 2022
@crisbeto crisbeto mentioned this issue Feb 10, 2022
Merged
wagnermaciel pushed a commit that referenced this issue Feb 11, 2022
@crisbeto
docs(material/datepicker): fix custom class example (#24393)
6cc1833 
The changes in #24171 added a `background: none` to the datepicker cell which broke one of the examples, because it increased the specificity. I don't think that there's a good way to reduce the specificity without moving the entire cell template around again so these changes update the example to be more specific.

Fixes #24383.
wagnermaciel pushed a commit that referenced this issue Feb 11, 2022
@crisbeto @wagnermaciel
docs(material/datepicker): fix custom class example (#24393)
8c6c0b5 
The changes in #24171 added a `background: none` to the datepicker cell which broke one of the examples, because it increased the specificity. I don't think that there's a good way to reduce the specificity without moving the entire cell template around again so these changes update the example to be more specific.

Fixes #24383.

(cherry picked from commit 6cc1833)
amysorto pushed a commit to amysorto/components that referenced this issue Feb 15, 2022
@crisbeto @amysorto
docs(material/datepicker): fix custom class example (angular#24393)
28c6d8d 
The changes in angular#24171 added a `background: none` to the datepicker cell which broke one of the examples, because it increased the specificity. I don't think that there's a good way to reduce the specificity without moving the entire cell template around again so these changes update the example to be more specific.

Fixes angular#24383.
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Mar 14, 2022
forsti0506 pushed a commit to forsti0506/components that referenced this issue Apr 3, 2022
@crisbeto @forsti0506
docs(material/datepicker): fix custom class example (angular#24393)
02ddeed 
The changes in angular#24171 added a `background: none` to the datepicker cell which broke one of the examples, because it increased the specificity. I don't think that there's a good way to reduce the specificity without moving the entire cell template around again so these changes update the example to be more specific.

Fixes angular#24383.
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@crisbeto crisbeto

Labels
area: material/datepicker docs This issue is related to documentation P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

docs(material/datepicker): fix custom class example crisbeto/material2
2 participants
@crisbeto @keith-aa