select(trackBy): preset object triggers ngChange

[zendu]

This issue is very similar to what is mentioned in issue #4118.

I have mdSelect with ngModel which is already populated and ngModelOptions using trackBy option. mdSelect has ngChange handler to trigger some more model updates when user really changes selection.
Options are rendered using ngRepeat and use ngValue to select the object.

Problem: ngChange on mdSelect is triggered just by the preset object bound to the model.

https://codepen.io/zendu/pen/VQjBzG

AngularJS: v1.6.4
Material: v1.1.6

[chenlijun99]

I'm facing the same problem.

In my case I have ngModel which could be already populated, whereas the array of ngRepeat is loaded only when md-select opens.

In order to show the populated value, I insert it into the array of ngRepeat so that one <md-option gets created and obviously ngModel matches with this option, so the value of ngModel is shown on md-select.

The problems is raised when I open md-select. Data is loaded from server and in the meanwhile I've cleaned the array of ngRepeat from the fake item I inserted before.

Now, I've set ng-model-options="{ "trackBy": "$value._id" } (yeah, I'm using mongodb) and among the loaded items there might be an object with the same _id of the one in ngModel.
I have the match again, but the two objects might be little different. Once the match is established the value of ngModel is set to the values of the matched object. They're conceptually the same, but e.g. in my case there are different $$hashKey properties added to both of them. So ng-change is triggered

I think the problem is here.

material/src/components/select/select.js

Line 896 in a4cc186

if (usingTrackBy ? !angular.equals(prevVal, newVal) : (prevVal + '') !== newVal) {

When using trackBy, instead of using angular.equals on the whole objects, a comparison between the property specified by trackBy should be performed.

[Splaktar]

Also of interest is that removing ng-model-options="{trackBy: '$value.value'}" from the CodePen in the OP causes the problem to go away. So this behavior is correct until trackBy is used.

@Free-Easy thank you for looking into this further.

We have a test for this but I think that it's currently giving a false positive. This is because our other tests for select and ng-change were failing and got disabled a few years ago.

Is anyone interested in fixing these tests, the usingTrackBy equality check, and opening a PR?

[chenlijun99]

It all goes well I will come out with a pull-request within this week-end.

[Splaktar]

Excellent! Please let me know if you have any questions.

[chenlijun99]

@Splaktar I have some questions regarding the tests.

• Are all the tests expected to pass? I'm having about 80 failing tests. Is it normal?
• Is there any way to run gulp karma only against a specific component?

[Splaktar]

Yes, all tests need to pass and none are known failures.

If you add an f in front of the test or suite, it should "focus" and only run that test or suite. I.e. fit, fdescribe.