md-autocomplete displaying '[object Object]'

[alex321]

Bug:

Md-autocomplete displays [object Object] even though it is passed a string. It displays that only if you select the same object from the dropdown list.

What is the expected behavior?

We should not see [object Object] after selecting the same object from the options.

What are the steps to reproduce?

Here is a Plunker that reproduces the issue:
https://plnkr.co/edit/acz2QZHuVo39rdOQ2C3E?p=preview

Select a value from the list. Then click on the input (without typing) and select the same value again (there should be only 1 value in the list - the current one).

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 4.3.2
Material 2.0.0-beta.8

[grizzm0]

You're setting the value to state, not state.name.

[willshowell]

And if you still want to bind the value to state instead of state.name, autocomplete has a displayWith input to control how the selected option gets displayed.

Example: https://plnkr.co/edit/W9vdWaGcoG90LKM8hHgI?p=preview

[alex321]

@willshowell I know but I still need this fixed for my use case.

[willshowell]

Hah nice edit 😒 just trying to help

--
Note that also if you just type "Me" and select the remaining option, it also happens. Here's my best guess:

1. Any time you select an option from the list, it writes the full object to the input.nativeElement (see these lines), which would display as [object Object].
2. Whenever the Angular detects a change between the previous NgModel value and the new one, it calls writeValue() with the result of your state getter. See here. This overwrites [object Object] with the new NgModel value, a string.
3. When there is not a change between values (i.e. you type "Me" and then select the "Me" option), writeValue() never gets called, so [object Object] is never overwritten.

In general, I would try to avoid overloading NgModel values, and you can still use displayWith to ensure that the correct value is always written to the input element.

cc @kara

[alex321]

@willshowell Thanks, I know. It's just that the autocomplete API is slightly confusing and I was experiencing various issue with the displayWith, I guess based on my use of getter.
At least from my point of view, the way I use ngModel feels natural. The examples only have a formControl.

I guess I can only use ngModelChange and displayWith and forget about the getter.

[josephperrott]

Closing as it appears the specific instance of the issue seems to be dealt with.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}