[object Object] when using ChangeDetectionStrategy.OnPush

[loneoakdev]

This one has got me a bit perplexed. I'm optimizing a project and switched the changeDetection to ChangeDetectionStrategy.OnPush for a component that contains a reactive form using this library. All of the other form controls render properly, but the initial render of this control shows [object Object]. If I click on the input field and then click off, the input updates to the correct display value.

All of the other input fields on this form are simple strings...this is the only one that is an object.

Has anybody encountered this issue when using OnPush and have a suggestion on how to get the form control to show the correct value on load? I tried injecting ChangeDetectorRef and calling that after creating the form and on AfterViewInit, but neither helped.

Thanks for any suggestions

[loneoakdev]

If I set a timeout and then call ChangeDetectorRef.detectChanges() after a few seconds, it updates to the correct value.

So it's definitely a change detection issue, probably because the phone number is an object and not immutable, and OnPush only works for immutable.

Other than calling detectChanges() manually, are there any other options?

[rg-lahcene]

I am having the same issue!

[rg-lahcene]

a dirty workarround that works with Change Detection strategy OnPush

          document.querySelector('.iti__tel-input')?.focus();
          // focus back tothe first input in the form
          document.querySelector('#client_details_name')?.focus();