Skip to content
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

bug(DATEPICKER): Close calendar button not placed correctly when opened using button click event #21043

Closed
acohenOT opened this issue Nov 13, 2020 · 2 comments · Fixed by #21058
Closed

bug(DATEPICKER): Close calendar button not placed correctly when opened using button click event #21043

acohenOT opened this issue Nov 13, 2020 · 2 comments · Fixed by #21058
Assignees
@crisbeto
Labels
area: material/datepicker P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@acohenOT
Copy link

acohenOT commented Nov 13, 2020 •
edited
Loading

Reproduction

StackBlitz: https://stackblitz.com/edit/angular-y4se2w

Steps to reproduce:

  1. Create a button that when clicked, opens the date picker (instead of using mat-datepicker-toggle component)
  2. Click button to open the date picker (notice UI artifact in the bottom left of the calendar)
  3. Tap the TAB key twice (notice the Close calendar button is on the inside of the calendar border)

Expected Behavior

When the picker is open, no UI artifact at the bottom of the calendar
image

When you tab to the Close calendar button, the button should appear outside of the calendar border
image

Actual Behavior

What behavior did you actually see?

When the picker is opened using a button click event, a UI artifact appears at the bottom of the calendar
image

When you tab the button, the button appears inside the calendar component
image

Environment

  • Angular: 11.0
  • CDK/Material: 11.0
  • Browser(s): Chrome 86
  • Operating System (e.g. Windows, macOS, Ubuntu): Windows 10
@acohenOT acohenOT added the needs triage This issue needs to be triaged by the team label Nov 13, 2020
@crisbeto crisbeto self-assigned this Nov 16, 2020
@crisbeto crisbeto added area: material/datepicker 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 Nov 16, 2020
crisbeto added a commit to crisbeto/material2 that referenced this issue Nov 16, 2020
@crisbeto
fix(material/datepicker): screen reader close button style specificit…
230ad0d 
…y too low

The specificity of the screen reader close button was the same as `.mat-raised-button`
which means that if the button styles are loaded after the datepicker styles, they'll
be overridden and will make the button look weird. These changes bump up the
specificity a bit to work around the issue.

Fixes angular#21043.
@crisbeto crisbeto mentioned this issue Nov 16, 2020
Merged
@crisbeto
Copy link
Member

The problem is that the specificity of the close button styles is too low and can be overridden by mat-button in some cases. I've submitted #21058 to fix it, but there's no good workaround until the fix lands, apart from manually setting display: none on the button.

wagnermaciel pushed a commit that referenced this issue Nov 19, 2020
@crisbeto
fix(material/datepicker): screen reader close button style specificit…
d9cc055 
…y too low (#21058)

The specificity of the screen reader close button was the same as `.mat-raised-button`
which means that if the button styles are loaded after the datepicker styles, they'll
be overridden and will make the button look weird. These changes bump up the
specificity a bit to work around the issue.

Fixes #21043.
wagnermaciel pushed a commit that referenced this issue Nov 19, 2020
@crisbeto @wagnermaciel
fix(material/datepicker): screen reader close button style specificit…
aba227a 
…y too low (#21058)

The specificity of the screen reader close button was the same as `.mat-raised-button`
which means that if the button styles are loaded after the datepicker styles, they'll
be overridden and will make the button look weird. These changes bump up the
specificity a bit to work around the issue.

Fixes #21043.

(cherry picked from commit d9cc055)
@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 Dec 20, 2020
wagnermaciel pushed a commit to wagnermaciel/components that referenced this issue Jan 14, 2021
@crisbeto @wagnermaciel
fix(material/datepicker): screen reader close button style specificit…
15d6bb8 
…y too low (angular#21058)

The specificity of the screen reader close button was the same as `.mat-raised-button`
which means that if the button styles are loaded after the datepicker styles, they'll
be overridden and will make the button look weird. These changes bump up the
specificity a bit to work around the issue.

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

@crisbeto crisbeto

Labels
area: material/datepicker 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.

fix(material/datepicker): screen reader close button style specificity too low crisbeto/material2
2 participants
@crisbeto @acohenOT