mdInput clear input button

[itsJess1ca]

Bug, feature request, or proposal:

Feature Request

What is the expected behavior?

When an mdInput text field has a value, there should be a clear (X) button on the right of the input to clear the text field.

What is the current behavior?

No button, user has to manually clear, or dev has to create another directive

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

I'm currently working on a search field, and expected the <input type="search" mdinput></input> to give users a clear button, as per the docs here https://material.io/guidelines/components/text-fields.html#text-fields-search-filter - however I'm either missing something, or it's not provided.

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

Is there anything else we should know?

[jefersonestevo]

I don't know if it's a behaviour that the mdInput should have. At least for now, I think you can use the mdSuffix and set your own component on that specific field.

Example: Plunker

[essenov]

If I have a form of 20 fields then I need 20 extra sufixes and event handler for each of them. That is a lot more routine code.

[mmalerba]

Yep, mdSuffix is the way to go. I do think it's worth adding this as an example in our docs since it seems like a common use case. Created #3730 to do so.

[itsJess1ca]

suffix does feel like a temporary solution, though fits what I need for now.
I think, after looking at the material guidelines that it's only search and autocomplete fields that should have the clear button. It'd be nice if material did handle this without me specifying a suffix for these situations.
Thanks for the suffix suggestion, though! I'll go remove my pos absolute css now ;)

[olingerc]

FYI: If you use this solution in a form together with a mat-icon-button to trigger the clear, you need to set type="button" on the button element, otherwise if the user hits enter in the input, it actually triggers the click handler of the button.
indirectly related SO post

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