Components: Clicking autocomplete field after clear doesn't show dropdown list

Created on 22 Mar 2019  路  2Comments  路  Source: angular/components

What is the expected behavior?

Clicking the cleared autocomplete input field should show the dropdown list.

What is the current behavior?

After clearing the autocomplete field using a clear button that sets the input value to null or '', clicking the cleared input field will not show the dropdown list. The dropdown list will show if the user clicks the label above the input field, clicks very close to the top side of the input line, or clicks away from the input then back into the input field.

What are the steps to reproduce?

https://stackblitz.com/edit/angular-srhd19?embed=1&file=app/autocomplete-simple-example.html

  1. Select an item from the list.
  2. Use the clear button to clear the input.
  3. Click in the middle of the input field, then notice nothing happen.
    autocompleteClickWorkaround

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

Angular6, Material 6.4.7 and 7.2.0, Windows 7 and Linux, Firefox 60.5.2, Chrome 72.0.3626.121

Is there anything else we should know?

The user can enter a character or select up or down arrows to force the dropdown list to open after input has been cleared.

P4 materiaautocomplete forms

Most helpful comment

It works if $event.stopPropagation() is added after the variable is set to null
https://angular-material-autocomplete-clear.stackblitz.io

All 2 comments

It works if $event.stopPropagation() is added after the variable is set to null
https://angular-material-autocomplete-clear.stackblitz.io

@lnu
Thanks, using $event.stopPropagation() worked for me.

(click)="inputProcess = null ; $event.stopPropagation() "

Was this page helpful?
0 / 5 - 0 ratings

Related issues

shlomiassaf picture shlomiassaf  路  3Comments

LoganDupont picture LoganDupont  路  3Comments

RoxKilly picture RoxKilly  路  3Comments

3mp3ri0r picture 3mp3ri0r  路  3Comments

vitaly-t picture vitaly-t  路  3Comments