Components: MatAutoComplete to have a button to clear the input

Created on 17 May 2018 · 5Comments · Source: angular/components

Bug, feature request, or proposal:

Feature request

What is the expected behavior?

To have a small button at the end of the input element (maybe a small 'x') that clears the input and show all the options in the dropdown panel again.

What is the current behavior?

What is the use-case or motivation for changing an existing behavior?

To improve UX. Without a button to clean the input, a user have to focus on the input element and clear all the text manually. The feature requested could save the user effort in populating the full option list again after entering some filtered text.

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

Is there anything else we should know?

Source

weijyewang

Most helpful comment

@pfeigl thanks. But then when ones click on the button to clear the input, the drop down list does not appear because my filter function was not triggered.

I was using userForm.controls['timeZone'].patchValue('', {emitEvent: true}) inside the button's (click) event

weijyewang on 18 May 2018

👍2

All 5 comments

Check the Input with a clear button example on https://material.angular.io/components/input/examples

pfeigl on 17 May 2018

👍1

Closing since this is already possible with the current APIs.

crisbeto on 17 May 2018

@pfeigl thanks. But then when ones click on the button to clear the input, the drop down list does not appear because my filter function was not triggered.

I was using userForm.controls['timeZone'].patchValue('', {emitEvent: true}) inside the button's (click) event

weijyewang on 18 May 2018

👍2

Sorry, I was suppose to set the value to null instead of empty string. Thanks again for the help :)

weijyewang on 18 May 2018

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._}