[mwc-textfield] Add a way to reset inputs state and value.

[aarondrabeck]

** PLEASE READ THIS BEFORE FILING AN ISSUE **

I'm submitting a:

• bug report
• feature request

We would like a way to reset the mwc-textfield/textarea back to its default state clearing any validation error that might be shown.

We keep having to reach inside the input to remove the invalid state:

 this.input.value = '';
 this.input?.mdcFoundation?.setValid(true);
 this.input.isUiValid = true;

😱

[asyncLiz]

Two potential solutions could be a method to explicitly set the styled validity

setValid(isValid: boolean): void;

Or a more opinionated method to reset the UI's validity state.

resetValidity(): void;

[vdegenne]

Is resetValidity also going to empty the field ?

[asyncLiz]

That's a good point to talk about, but I would argue no. "Validity" in this sense is referring to UI validity styling, which is separate from a text field's "valid" or "invalid" state.

That's why I'd go with something like resetValidity() instead of reset(). To me, a full reset would be something like this and would be called on a form's reset event.

reset() {
  // native behavior, doesn't "empty" the field but returns to the initial value.
  this.value = this.initialValue; 
  this.resetValidity();
}

[e111077]

sidenote, there also seems to be an inconsistency between state of dom and isUiValid. Might have to add a conditional in addClass adapter that does the following:

// addclass
if (className === 'mdc-textfield--invalid') {
  this.reportValidity();
} else {
  this.mdcRoot.classList.add(className);
}

// removeClass
if (className === 'mdc-textfield--invalid') {
  this.reportValidity();
} else {
  this.mdcRoot.classList.remove(className);
}

this tends to happen on @change. Additionally, simply setting input.isUiValid should always work if we make this fix despite me not wanting to expose that prop.

[vdegenne]

@asyncLiz I agree resetValidity should not empty the field. In this case isn't the implementation of the reset function also a good thing to include in the changes ?

resetValidity adds more to the family of validity functions and it becomes a puzzle to make things look in harmony when all what the end-user usually needs is to empty the field and remove the error aspect of the element.

This request is originated from when one is emptying the value from the field. It's explicitly stated in the OP's code and as one of the end-users too I was requesting that feature for the same reason in another post. When one wants to just reset the validity of another form predicate he would usually use setCustomValidity('') which not only removes the visual helper but also the red feedback color. But using setCustomValidity('') when the attribute request is on the input element doesn't remove the red color.

More but not least consider the simplification of subsequent code, just for instance :

reset() {
  this.form.querySelectorAll('mwc-textfield').forEach(textfield => textfield.reset());
}

[e111077]

oops my bad, reopened

[aarondrabeck]

reset() {
  this.form.querySelectorAll('mwc-textfield').forEach(textfield => textfield.reset());
}

This would cover all my uses cases. Additionally if all mwc form components had this interface it would make reseting inputs on a page trivial.

[asyncLiz]

This is also somewhat related to #289. If we implement form participation, resetting would be one of those facets.

[johnthad]

reset() {
  this.form.querySelectorAll('mwc-textfield').forEach(textfield => textfield.reset());
}

This would cover all my uses cases. Additionally if all mwc form components had this interface it would make reseting inputs on a page trivial.

It's also necessary to reset selects, radio buttons, sliders, etc.

[e111077]

AFAIK form participation is not in the plan for a while; mostly due to polyfilling issues. Instead we will be doing formdata event participation which I don't believe handles reset

[masaoliou]

Same with lit:

<mwc-textfield type="number" .value="${this.value === 0 ? 0 : this.value || ''}"></mwc-textfield>

1. Initial value for this.value is null. mwc-textfield displays blank.
2. Manually enter 99. mwc-textfield display 99.
3. this.value=null;
4. mwc-textfield keeps displaying 99!

[vdegenne]

@masaoliou this is the intended behavior, when you type in the field you are not updating this.value (and it's not related to this issue)

[masaoliou]

@masaoliou this is the intended behavior, when you type in the field you are not updating this.value (and it's not related to this issue)

I inadvertently omitted the important part. The following version is more complete.
Please note that change event handler is included this time.

<mwc-textfield type="number" .value="${this.value === 0 ? 0 : this.value || ''}" @change="${e=>this.value=e.target.value}"></mwc-textfield>

1. Initial value for this.value is null. mwc-textfield displays blank.
2. Manually enter 99. mwc-textfield display 99.
3. this.value=null;
4. mwc-textfield keeps displaying 99!

[asyncLiz]

This is now added in the new text field, so going to close this issue as obsolete.