question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

mat-datepicker: valueChange fires without blur event with `updateOn: 'blur'` set

See original GitHub issue

Reproduction

Use StackBlitz to reproduce your issue: https://stackblitz.com/edit/angular-6qr4ut?file=angular.json

Steps to reproduce:

  1. Type a valid date in the box starting with ‘0’ (zero)
  2. Wihtout blur start to delete char by char from the end
  3. Delete the all chars until the last one (zero char from step 1)

Expected Behavior

Nothing should happen, since the focus still in the box

Actual Behavior

valueChanges event is fired. The changes will be pushed into an array and displayed in the page

Environment

  • Angular: 9
  • CDK/Material: 9
  • Browser(s): Chrome (but should work in others)
  • Operating System (e.g. Windows, macOS, Ubuntu): windows
  • Ivy disabled
  • IMPORTANT you have to use MatMomentDateModule

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:2
  • Comments:10 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
viniciusschueltercommented, Aug 10, 2022

Hey @jelbourn this bug is not happening anymore, i believe this issue need to be closed. Btw @lautarobock if still happening with you pipe(distinctUntilChanged()) should be help you

1reaction
sahilmore-gitcommented, Aug 21, 2021

Yes I totally agree with you @lautarobock but I just found out that even if we add a character like ‘a’ or ‘b’ any character in an empty input field the event gets triggered even if it’s still in focus. That’s a new issue I guess. 😦

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to use onBlur event on Angular2? - Stack Overflow
For a model-driven form to fire validation on blur , you could pass updateOn parameter. ctrl = new FormControl('', { updateOn: 'blur', //default...
Read more >
Angular Form Validation on Blur and Submit - Fiyaz Hasan
So, the first one in our backpack is the updateOn: 'blur' option. Applying this will make the value of a Form Control change...
Read more >
Datepicker - Angular Material
The (dateChange) event will fire whenever the user finishes typing input (on <input> blur), or when the user chooses a date from the...
Read more >
The updateOn Option in Angular Forms - InDepth.Dev
We use updateOn: 'submit' on the FormGroup level and updateOn: 'blur' on the fullName FormControl . With this, the fullName control will update...
Read more >
Angular Material Datepicker Change Event - ConcretePage.com
The dateChange event is bound to Datepicker input text. The native change event triggers only when user change date by manual entry but...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found