fix(slide-toggle): error when disabling while focused

[devversion]

• Fixes that Angular throws an ExpressionChangedAfterItHasBeenCheckedError when disabling the slide-toggle while the component has been focused.

Fixes #12323

[jelbourn]

I don't quite follow this scenario; what is it that's being updated after check?

[devversion]

Calling onTouched updates the ContolValueAccessor's state (which is basically the slide-toggle) and technically the associated control.

We could theoretically also check for NgControl to be present, but I don't think it's worth having a condition here.

[jelbourn]

I still don't follow, though, what is triggering an update while/after change detection runs. Handling an event from the focus monitor should inherently happen in a separate tick, no?

[devversion]

That's at least what I figured out from debugging:

1. Underlying input element is focused
2. Disabled binding is set --> Run change detection
3. Update disabled property of underlying input (part of change detection)
4. Setting disabled on a native input element while focused causes a blur event to fire (not in the same tick --> so outside of the change detection
5. Angular checks for changes after the CD ran: Figures out that the ng-untouched class binding of the NgModel changed after the actual change detection ran. --> Error thrown!

The comment tries to shortly explain that general issue. From what it says, it's pretty much what happens in 5) and it's also referring to that specific GitHub issue.

[jelbourn]

Ah, I was missing the fact that setting an input to disabled immediately fires a blur event. Found angular/angular#17793 that references this. I would phrase the comment as:

// When a focused element becomes disabled, the browser *immediately*
// fires a 'blur' event. Angular does not expect events to be raised during
// change detection, so any template state updates in response to 'blur'
// (such as a form control's 'ng-touched') will cause a changed-after-checked
// error. See https://github.com/angular/angular/issues/17793.
// To work around this, we defer telling the form control it has been touched
// until the next tick.

[devversion]

Updated. I didn't even start thinking about it potentially being an Angular issue.

[jelbourn]

LGTM

[angular-automatic-lock-bot]

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.}