angular / angular/components

Datepicker: When selecting a month in a year/month mode, the day selection flashes on click

Open
#20,904 3 comments 9 reactions 0 assignees View on GitHub
area: material/datepicker P3
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

#### Reproduction

https://stackblitz.com/angular/kgvngvkblme?file=src%2Fapp%2Fdatepicker-views-selection-example.ts

Steps to reproduce:
1. Click on the calendar icon
2. Select a year
3. Select a month

This is actually the example from https://material.angular.io/components/datepicker/overview, although I found it more noticeable in my app

#### Expected Behavior

The datepicker calendar should close immediately.

#### Actual Behavior

When clicked on the month, the calendar briefly switches into monthly view (therefore displaying all the weeks and days), before closing.

#### Environment

- Angular: 10.2.0
- CDK/Material: 10.2.5
- Browser(s): Chrome
- Operating System (e.g. Windows, macOS, Ubuntu): macOS

Contributor guide

Open the contributing guide

Research direction

Start with the StackBlitz reproduction, especially src/app/datepicker-views-selection-example.ts, and reproduce the year-then-month selection in the Angular datepicker. Trace the transition after month selection and verify that the calendar closes immediately without briefly showing the day view.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.