select compareWith receiving incorrect parameters

[JohnYoungers]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

In a reactive form with a select, changing the options results in the compareWith function to be called incorrectly.

Expected behavior

compareWith should be called with the correct model

Minimal reproduction of the problem with instructions

1. Go to: http://plnkr.co/edit/8vucKr2H0QGuZQJnhySi?p=preview
2. Change dropdown value to 'A'
3. Click 'Update List' button
4. Value stays the same; however, it was not re-selected in the select
5. All comparisons are logged to the console window: You can see once you've regenerated the list the comparisons go from object v. object to object v. string ("1: Object")

What is the motivation / use case for changing the behavior?

I have a form where previous inputs can impact the options of a specific select: if the user's original selection is still valid, it should show it's still selected.

Environment

Angular version: 4.3.1


Browser:
- [X] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 

[JohnYoungers]

For anyone in a similar situation, in my project I've updated my list re-calculation trigger to re-set the value, which is probably something I would have needed to do regardless to null out the selection if it was no longer valid (formatted to match the plunker implementation):

this.form.controls['otherField'].valueChanges.subscribe(() => {
	this.updateList();

	let selectedValue = this.form.controls['selectedItem'].value;
        if (selectedValue) {
            this.form.controls['selectedItem'].setValue(this.options.find(o => this.compareItems(o, selectedValue)));
        }
    });

[gangfang]

Hello @jayoungers,

I experience the exact same problem. Since I am using template driven form so I can't fully understand your solution.

But what do you think is the cause (why it printed out "1: Object") regardless of the way to address that?

Thanks

[JohnYoungers]

I believe it's an issue in the Angular code; not necessarily something you'd be able to resolve yourself.

If you aren't using reactive forms, your best bet may be in the event that updates the list, once the list is updated, set your model variable to be the matching value in the new list (if it exists)

[gangfang]

Thanks @jayoungers,

If that is the case then I am not going to mess around with it anymore. There is simple workaround that will work for me.