fix(angular): defer control value accessor write until after hydration

[sean-perkins]

Pull request checklist

Please check if your PR fulfills the following requirements:

• Tests for the changes have been added (for bug fixes / features)
• Docs have been reviewed and added / updated if needed (for bug fixes / features)
• Build (npm run build) was run locally and any changes were pushed
• Lint (npm run lint) has passed locally and any fixes were made for failures

Pull request type

Please check the type of change your PR introduces:

• Bugfix
• Feature
• Code style update (formatting, renaming)
• Refactoring (no functional changes, no api changes)
• Build related changes
• Documentation content changes
• Other (please describe):

What is the current behavior?

Stencil hydrated web components can delay the execution timing for the connectedCallback() on first initialization. This results in the Angular control value accessors writing the value to the element before it is initialized.

In the event of using Angular forms with a form control that has an existing value; this will mean that the control will be initialized without a value. The emitStyle() from our Ionic form controls will update the ion-item appearance, without the appropriate item-has-value class. Then, before attributeChangedCallback() is registered, the value will be assigned to the web component. This results in the inner control displaying with a value, but the side-effect behavior that ion-item is out of sync.

This wasn't an issue before angular/angular-cli@22e0208, as likely the connectedCallback behavior in Stencil was benefiting from the defect in Zone.js.

Issue Number: Resolves #23809

What is the new behavior?

The Ionic custom control value accessors will delay the writeValue operation (assigning the value to the element), until after both the custom element is defined and the componentOnReady life cycle method has completed.

This aligns the Ionic web components with native web component behavior that the operations will occur in this order for each initialization of the component:

1. connectedCallback()
2. controlValueAccessor.#writeValue()

Updates the removeEventListener implementation for Stencil hydrated web components to make use of the monkey-patch method, just as the addEventListener operates.

Does this introduce a breaking change?

• Yes
• No

Other information

[sean-perkins]

Looks like ngModel implementation behaves differently than NgControl, with it's own set of oddities (angular/angular#14988).

Need to dig a little deeper to make this PR satisfy both requirements.

[sean-perkins]

Discovered a flaw with this while triaging another issue and checking this fix against it.

The ngModel change, actually fixes an issue where form controls are emitting ionChange the 2nd+ time it's rendered (i.e. a datetime in an inline modal) when opened (#24452). This is because the value is now being assigned before the component fully mounts.

It however regresses the form control behavior to do what ngModel was previously doing; as the write value is deferred until after the component is mounted. This results in our @Listen callbacks for value change to fire and re-emit the same value as a change.

I need to dig further into this, it may be a race condition between web component initialization and when Angular decides to write the value prop.