CODEWITHSUNDEEP
angularangular-materialangular-reactive-forms
wtylergibbons
wtylergibbons

Reputation: 130

Why is my form control being set to null in this very specific instance?

In this example, I have a parent form and two child form groups to gather address info. The two child form groups are added by a component. I want to add a button on the parent form, that copies the values from the mailing address input to the physical address input.

This means, I not only need to copy the form values, but also the search control values so that it displays the same. This works perfectly fine most of the time. However, when you click the copy to physical button while the physical address input is focused you can see (very briefly) that the search control gets set correctly, but then immediately gets set to null.

Steps to reproduce:

  1. Select an autocomplete option from mailing address
  2. Focus the physical address input (cursor blinking ready for text)
  3. Click the copy to physical button and observe the behavior (namely, the value labelled physical address search value)

Minimal example: https://stackblitz.com/edit/shkuxf?file=src%2Fapp%2Faddress-input%2Faddress-input.component.ts

I can't seem to figure out why this behavior is happening. Any help is appreciated.

Thanks

Upvotes: 0

Views: 229

Answers (1)

Andrei
Andrei

Reputation: 12206

can't say it was easy to find.

As you click on textarea - autocompleteTrigger, it opens a panel and subscribes for panelClosingActions. the one that is bothering us is _getOutsideClickStream.

and then when you click somewhere (on the copy button in your case) it calls _setValueAndClose with null value as an event.

here this._element.nativeElement.value is already updated to what you've set but this._valueOnAttach is empty string. that is why it schedules onChange(null) for the animation end here

don't think there is a good way to fix that. For example you can schedule a value update after the closing logic is calculated to not to fall into that if condition

setTimeout(() => {
 this.physicalAddressInput.setSearchControlValue(
   mailingSearchControlValue
 );
})

as you can see writeValue method there is an async hack already, I would say because of simillar reasons as yours

Upvotes: 1

Related Questions