md-autocomplete md-clear-button=“true” does not show the clear button

Question

I have the issue with <md-autocomplete> component which is shown in this demo :

<md-autocomplete md-clear-button="true"> does not work. I would expect that a cross is shown at the end of the input field, like it is shown for official Basic Usage demo .

If someone can update the my demo so that clear button works, I will appreciate.

Answer 1

This actually works fine in current version v1.1.4 (perhaps above v1.1.2). See demo here .

Also, it seems this was intentional behavior while using md-floating-label for md-autocomplete according to some GitHub issues ( #2727 and #7800 )

If you don't have a choice of updating the angular-material version, you can have a look at this comment which turns out to be a somewhat applauded work-around.

Hope that helps!

Answer 2

Update your angularjs-material version to 1.1.2 and above. Just compare versions 1.1.0 (under the attributes section) and 1.1.2 (there's a dedicative section for md-clear-button attribute)

NOTE: Looks like Google hasn't served angularjs-material for versions 1.1.2 and above. Use cdnjs instead.

UPDATE : Google now serves angularjs-material for versions 1.1.2 and above. More info

Here's the updated fiddle .