angular / angular/components

bug(datepicker): Date range picker emit repeated events after the first date is selected

Open
#27,322 1 comment 2 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

### 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

When a date range picker is opened and the start date is selected, two consecutive `valueChanges` event are triggered, and after the end date is selected the final event is triggered, in total 3 events happens instead of only two.

### Reproduction

StackBlitz link: https://stackblitz.com/edit/shrtut?
Steps to reproduce:
1. Click on the `mat-datepicker-toggle` button.
2. Select a start date like: 6/18/2023
3. Notice on the _Changes_ section below that two events were triggered.
4. Select the end date: 6/24/2023.
5. A final event in logged on the _Changes_ section.

### Expected Behavior

After selecting the first date only a single `valueChanges` event should be triggered.

The expected behavior is show on the _Workaround Changes_ section where a `debounceTime(0)` is forced in order to remove the spurious repeated event.

### Actual Behavior

Two events are triggered after selecting the start date

### Environment

- Angular: 16.1.1
- CDK/Material: 16.1.1
- Browser(s): Firefox, Chrome.
- Operating System: Linux (Fedora)

Contributor guide

Open the contributing guide

Research direction

Start with the linked StackBlitz reproduction and the Angular Material date range picker flow using mat-datepicker-toggle and valueChanges. Reproduce the selection of 6/18/2023 followed by 6/24/2023 in the Changes section, then compare it with the debounceTime(0) workaround. Done means one valueChanges event after the start date and one after the end date.

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
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.