lwc

lwc copied to clipboard

Is your feature request related to a problem? Please describe. I wanted to make a very simple form with a required file input and a required text input. After the submit button is clicked, the inputs get cleared. Additionally, I use checkValidity() and reportValidity. For text input, setting .value = '' works (after reset, reportValidity correctly activates "Complete this field."). However, this activation doesn't happen for file input. It turns out that checkValidity for file input is still set to true even after setting .value = ''.

Describe the solution you'd like Clearing file input to be similar to clearing text inputs as described in the documentation:

this.template.querySelector('[data-name="fileSelector"]').value = '';   // <--- this should work

In plain HTML+JS, this setting value to empty setting simply works for <input type="file" /> (tested in Chrome and Firefox) or all other input types as far as I know. So I think the same code for resetting type="text" should also apply for type="file" in this case.

Describe alternatives you've considered I initially asked this in Salesforce.SE: https://salesforce.stackexchange.com/q/379847. However, resetting using form tag also doesn't change checkValidity back to false.

Additional context This is the demo that I described in my previous issue (#2946).