Reset MDC TextField?

[touficbatache]

Feature Requests

I opened this issue based on the request of @amsheehan on Discord.

I wanted to ask what's the best way to reset MDC Input Fields after I typed into them? For example, I typed something and submitted that thing, I want that later, the MDC TextField to be reset and not have any text in it. I tried changing its value to '' (none) and after that, I blur() the field but it doesn't work: the label doesn't return to where it was but it keeps floating without any text.

1. UPDATE: I solved my problem by removing the mdc-textfield__label--float-above class from the label so it returns to where it was: document.querySelector('.label's class').classList.remove('mdc-textfield__label--float-above');

2. UPDATE: Another thing occurred when MDC TextField had a required attribute and turned red: the red input color didn't go away so I did that: document.querySelector('.mdc-textfield').classList.remove('mdc-textfield--invalid');

Maybe this could "be good to add to the component": adding a function that fully resets MDC-Textfield!

[lynnmercier]

I'm going to use the term "clearing" instead of "resetting"...just to be a little pedantic.

There is no guidance about clearing text fields in the Material Design Guidelines, but I still think this is a reasonable request from a Web Components point of view. Perhaps you'd like to submit a PR with the "clear" method on the MDCTextfield? We can review it with our design team.

[Garbee]

reset is an actual thing too for HTML. There is a reset button type and form input method. These should be taken into account as well with the API for modifying the state of nodes.

Depending on the context here, reset is actually what is desired. The example situation provided simply leans towards a clear method given its context.

[touficbatache]

I think that reset is better as we are not just clearing the textfield but we are:

1. Clearing its value
2. Removing the invalid class if there is any
3. Making the label go back to its place

@lynnjepsen Could you please provide more info on how the method should work and where I need to implement it? I'm not really sure which files to change if I want to add a new method as you're using a sort of structure that I don't really understand.

[Garbee]

Clearing its value

You are NOT to clear the value. It is to be reset to the initial value. Big difference in expected functionality.

Removing the invalid class if there is any

This needs MD guidance from the team. Should it go back to the original state of the node? Or should it be invalid if it is invalid since the user has had an interaction with the form which has caused it to come into an invalid state? Even if the original state was invalid without associated state.

[amsheehan]

It should behave as the reset() method is described

• [ ] Restore the form element's default value (in some cases that will clear the form element)
• [ ] Does not reset other attributes on the form element

I think we should also reset any MDC specific style/behavior as well. Thinking of practical use cases, this makes the most sense. If a field started without an error, it should reset to a non-error state, even if its default state didn't pass validation or something.

[touficbatache]

I think the invalid class should disappear. Let's say a user was filling a form, there was an error, the user didn't yet submit the form, but he went back and now all the fields should be cleared and reset. When he goes to the form again, he should see all the fields valid again, without any text in them and all the label back to their place.

[Garbee]

I look at it as, the user has conducted an action on the page which has triggered the form/node to be in an invalid state. Therefore, the validation warnings should show so that they know things should be fixed before continuing.

Hence, why we need MD spec team guidance on this one. It depends on how you want to interpret that action happening.

[yshterev]

Hi @Garbee! In the Material Design Lite project there were methods like:

• MaterialTextfield.checkDirty();
• MaterialTextfield.checkValidity();
• MaterialTextfield.checkFocus();

Are there anything similar for the textfields in this project? They were pretty useful to me before and definitely a better solution than adding and removing classes manually.

[Garbee]

The API Docs for each component describes what is available. If you don't see what you need there, then file an issue for the APIs you need so they can be discussed and implemented if needed.

[anton-kachurin]

It may be reasonable to add to the component API the resetValidation method (which will simply remove mdc-textfield--invalid class from the label) and the inputElement property (which will give access to .inputElement.value property).

Combined with #1197, it will completely cover such usecases:

For example, I typed something and submitted that thing, I want that later, the MDC TextField to be reset and not have any text in it.

[touficbatache]

@anton-kachurin Sounds great, submit a PR if you like :smiley:

[patrickrodee]

Liz will investigate how this can be resolved to better cooperate with forms.