Setting value of auro-input to undefined does not reset error state

[ethanwmiller]

Please verify the version of auro-input you have installed

2.15.1

Please describe the bug

1. Create an error state on an auro-input component (for example, leaving a required field blank)
2. Programmatically set the input's value to undefined
3. The input's error state does not reset (pictured below)

Reproducing the error on the docsite

This issue cannot be reproduced on the Auro docsite

Expected behavior

When the value of auro-input is set to undefined, it should completely reset the component, including error states.

What browsers are you seeing the problem on?

Chrome

Additional context

No response

[Dale Sande]

@ethanwmiller thanks for your submission. Looking at this issue I can say a few things. The element's validation feature is triggered by blur events to re-evaluate. This is intentional to reduce the triggering of validation while someone is typing or otherwise.

If I am understanding the issue correctly, programmatically changing the value of the element is not triggering the blur event we are looking for.

Can you tell us more about the use case you have where there is an error on an element and you are programmatically removing the value of the input?

A proposed solution that may work is, if you are programmatically targeting the element to clear the content, you can also target the validity="valueMissing" in the DOM. Removing that attribute will remove the error UI you are looking for.

[ethanwmiller]

@blackfalcon thanks for the response. Here is our use case in generic terms: when making a purchase, there is a "comments" input. By default, this input is not required. However, if a user adds a discount to their purchase, then the comments field is required. Finally, if the user removes the discount, then the comments field should be reset to its original state (blank and not required).

So the very specific case where this comes up is thus: they apply a discount, they focus into the comments field, they blur away from the comments field (triggering the "field is required" error) and then they remove the discount. The expected behavior is that the error state goes away. But it persists.

HOWEVER: your workaround works! Setting inputElement.validity = undefined in the same function that resets the value does reset the error state. We're good with that fix for now, but if you decide to update it to where setting the value also resets the validity then let me know. CC @jason-capsule42

[Dale Sande]

@ethanwmiller I see your use case to be very interesting. What I can also suggest is that as you toggle the required state of the input, you can also add/remove the required attribute. Also you may want to look at the lesser known "Disable auto-validation" feature

https://auro.alaskaair.com/components/auro/input

Supporting your use case directly may be difficult to do as it requires some heavy state management and we tend not to do that, but using the API as described enables you to do that.