fix(angular): defer control value accessor write until after hydration #24401
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Pull request checklist
Please check if your PR fulfills the following requirements:
npm run build
) was run locally and any changes were pushednpm run lint
) has passed locally and any fixes were made for failuresPull request type
Please check the type of change your PR introduces:
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 theion-item
appearance, without the appropriateitem-has-value
class. Then, beforeattributeChangedCallback()
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 thation-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 thecomponentOnReady
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:
connectedCallback()
controlValueAccessor.#writeValue()
Updates the
removeEventListener
implementation for Stencil hydrated web components to make use of the monkey-patch method, just as theaddEventListener
operates.Does this introduce a breaking change?
Other information