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

Datepicker ExpressionChangedAfterItHasBeenCheckedError on disable with focus #9559

Closed
oliveti opened this issue Jan 24, 2018 · 2 comments · Fixed by #9717
Closed

Datepicker ExpressionChangedAfterItHasBeenCheckedError on disable with focus #9559

oliveti opened this issue Jan 24, 2018 · 2 comments · Fixed by #9717
Assignees
@devversion
Labels
P4 A relatively minor issue that is not relevant to core functions

Comments

@oliveti
Copy link

oliveti commented Jan 24, 2018 •
edited
Loading

Bug, feature request, or proposal:

Bug

What is the expected behavior?

It should be possible to disable a focused date picker

What is the current behavior?

An error is raised when the datepicker field is disabled when the field is focused.

Error message :
ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'mat-input-invalid: true'. Current value: 'mat-input-invalid: false'.

What are the steps to reproduce?

https://stackblitz.com/edit/angular-date-picker-cd-focus

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Material : 5.1.0

Is there anything else we should know?

It works is the field is programmatically blurred before being disabled.
@jelbourn jelbourn added the P4 A relatively minor issue that is not relevant to core functions label Jan 24, 2018
@devversion
Copy link
Member

Just want to collect what I figured out while debugging this issue.

  1. The datepicker input has a custom ControlValueAccessor
  2. Whenever disable() is being called (_first CD), the datepicker input only knows about it
  3. The datepicker input just queues in a new CD, to set the [disabled] binding on the input element.
  4. If that happens, and the input is focused, it will be blurred automatically due to the disabled state. This means that there will be another change detection round that then notifies a modified errorState due to the native input elements disabled state (invalid always set to false)

devversion added a commit to devversion/material2 that referenced this issue Jan 31, 2018
@devversion
fix(datepicker): changed after checked error if focused datepicker in…
5d45193 
…puts turn disabled

In some situations, the `disable()` method of a form control is called while the datepicker input is focused. This causes a changed after checked error.

Normally, native input elements automatically blur if they turn disabled. This behavior is problematic, because it would mean that it triggers another change detection cycle, which then causes a changed after checked error if the input element was focused before.

Fixes angular#9559
@devversion devversion mentioned this issue Jan 31, 2018
Merged
mmalerba pushed a commit that referenced this issue Feb 8, 2018
@devversion @mmalerba
fix(datepicker): changed after checked error if focused datepicker in…
46c8097 
…puts turn disabled (#9717)

In some situations, the `disable()` method of a form control is called while the datepicker input is focused. This causes a changed after checked error.

Normally, native input elements automatically blur if they turn disabled. This behavior is problematic, because it would mean that it triggers another change detection cycle, which then causes a changed after checked error if the input element was focused before.

Fixes #9559
mmalerba pushed a commit that referenced this issue Feb 8, 2018
@devversion @mmalerba
fix(datepicker): changed after checked error if focused datepicker in…
01ad7bd 
…puts turn disabled (#9717)

In some situations, the `disable()` method of a form control is called while the datepicker input is focused. This causes a changed after checked error.

Normally, native input elements automatically blur if they turn disabled. This behavior is problematic, because it would mean that it triggers another change detection cycle, which then causes a changed after checked error if the input element was focused before.

Fixes #9559
tinayuangao pushed a commit that referenced this issue Feb 9, 2018
@devversion @tinayuangao
fix(datepicker): changed after checked error if focused datepicker in…
1dd3b06 
…puts turn disabled (#9717)

In some situations, the `disable()` method of a form control is called while the datepicker input is focused. This causes a changed after checked error.

Normally, native input elements automatically blur if they turn disabled. This behavior is problematic, because it would mean that it triggers another change detection cycle, which then causes a changed after checked error if the input element was focused before.

Fixes #9559
@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 Sep 8, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@devversion devversion

Labels
P4 A relatively minor issue that is not relevant to core functions
Projects
None yet
Milestone
No milestone
3 participants
@jelbourn @oliveti @devversion