Dropdown ignores patched value when observable values set async in reactive form

[Sam Prager]

Hi, I have a scenario where I load dropdown options and then get the value for the dropdown . When the value is patched prior to loading the options, the patched value is ignored

I've included an example with a replay subject observable

https://stackblitz.com/edit/angular-snprkn-4et8y2?file=app.component.ts

Expected behavior : Dropdown should be set to patched value "A"

Actual behavior : Dropdown is set to initial value. "C"

I've also included another example with a normal observable

https://stackblitz.com/edit/angular-snprkn-mffhc7?file=app.component.ts

[Sam Prager]

code sample

[Deepak Ramakrishnan]

Hi Sam, 

 

Greetings from Syncfusion support. 

 

We suspect that you are trying to bind the value before the datasource get loaded to the component . Hence the reported issue may occur in your end. So we request you to assign the value once the datasource is bounded to the component . We have modified your sample for your reference with our suggestion. 

 

Sample Link: https://stackblitz.com/edit/angular-snprkn-gu2qfv?file=app.component.ts  

 

 

constructor(private fb: FormBuilder) { 

    console.log('Make Form'); 

    this.form = this.fb.group({ 

      MyDropDown: 'C', 

    }); 

 

    window.setTimeout(() => { 

      this.form.patchValue({ 

        MyDropDown: 'A', 

      }); 

 

      console.log('Patch Value'); 

    }, 2000); 

 

    window.setTimeout(() => { 

      let arr: OptionDto[] = []; 

      arr.push(<OptionDto>{ label: '', code: '' }); 

      arr.push(<OptionDto>{ label: 'A Label', code: 'A' }); 

      arr.push(<OptionDto>{ label: 'B Label', code: 'B' }); 

      arr.push(<OptionDto>{ label: 'C Label', code: 'C' }); 

      arr.push(<OptionDto>{ label: 'D Label', code: 'D' }); 

 

      this.MyDropDownOptions.next(arr); 

 

      console.log('Set options'); 

    }, 2000); 

  } 

 

 

 

 

 

If the above does not meet your requirement , Revert us with exact use case scenerio to proceed further in our end. 

 

 

Thanks, 

Deepak R. 

[Sam Prager]

I guess I'm trying to report a bug and heres why.

An observable may be resolved at any time - before or after the value of the dropdown is set. That is why its an observable. The dropdown documentation indicates it has support for observables.

A reactive form can be patched at any time after initialization.

The patching of the form and the completion of the observable are independent and I don't think the programmer should have to synchronize them. So, the code in the samples in the initial post are valid, but, the control does not work as I believe it should.

Let me know if this is the proper channel to report a bug or if I should report it elsewhere.

[Berly Christopher]

Hi Sam Prager, 

  

We will check the shared sample and provide the further details in two business days (17^th December 2021). 

  

Regards, 

Berly B.C 

[Sam Prager]

Have you made any progress? 

Thanks,

Sam

[Deepak Ramakrishnan]

Hi Sam, 

 

Yes we can only reproduce the issue when setting the patchValue  inside setTimeout method , Otherwise its works as expected . So we request you to provide the use case scenerio for setting the value before the datasource get loaded or assigning the value with certain interval to the component as mentioned earlier. So based on that we will provide modified solution to the scenerio . In the below sample you can find its working as expected when setting the patchValue outside the interval. 

 

 

Sample link : https://stackblitz.com/edit/angular-snprkn-n9ddmw?file=app.component.ts  

 

constructor(private fb: FormBuilder) { 

    console.log('Make Form'); 

 

    let val: any; 

 

    this.form = this.fb.group({ 

      MyDropDown: 'B', 

    }); 

 

    this.form.patchValue({ 

      MyDropDown: 'D', 

    }); 

 

   

    window.setTimeout(() => { 

 

      this.form.patchValue({ 

        MyDropDown: 'A', 

      }); 

      console.log('Patch Value'); 

    }, 1500); 

 

    window.setTimeout(() => { 

      let arr: OptionDto[] = []; 

      arr.push(<OptionDto>{ label: '', code: '' }); 

      arr.push(<OptionDto>{ label: 'A Label', code: 'A' }); 

      arr.push(<OptionDto>{ label: 'B Label', code: 'B' }); 

      arr.push(<OptionDto>{ label: 'C Label', code: 'C' }); 

      arr.push(<OptionDto>{ label: 'D Label', code: 'D' }); 

 

      this.MyDropDownOptions.next(arr); 

 

      console.log('Set options'); 

    }, 3000); 

  } 

} 

 

 

 

 

 

Thanks, 

Deepak R. 

[Sam Prager]

In the examples above, setTimeout represents an asynchronous call. In actual application code, this would be a http request to the server for more data, or a proper value. Both the form values and the drop down options are queried for asynchronously and may arrive in either order. Thus, if the form values arrive first, the patch value operation occurs before the drop down data source gets loaded.

The issue as described above is not fictitious. It happens on every screen in our data entry application when we get the data source and form values in a separate http call. It is highly relevant to our continued use of the drop down control.

Thanks for your response and I look forward to hearing how you are going to solve this issue.

[Deepak Ramakrishnan]

Thanks for providing required information . We will further validate and update the details in two business days(29^th,December 2021). 

[Deepak Ramakrishnan]

Hi Sam, 

  

Sorry for the inconvinience caused . 

  

We are still validating the issue due to its complexity . We will update the details in two business days (31st,December 2021). 

  

Thanks, 

Deepak R 

[Deepak Ramakrishnan]

Hi Sam, 

 

Thanks for your patience. 

 

We have analyzed the reported case in our end, the dropdownlist will set the value to the component only when the value is present in the datasource. This is the components intended behavior. Also we have provided support for observables only in the datasource property. Hence we request that you to set the value once the datasource is completely loaded into the component.  

 

In your shared case, the value property is set to a component with a certain time interval will search for the presence of the respective item in the datasource within that time period, but the datasource will get loaded after the respective time period, so it will move to the pre/post set value without any certain time limit (stable value).  

 

 

Thanks, 

Deepak R.