availity-reactstrap-validation
availity-reactstrap-validation copied to clipboard
When clicked, file type field immediately says "This field is invalid"
We have the following code in our form:
<AvField type="file" id="file" name="file" label="File*" required onChange={e => { this.setStateIfMounted({ file: e.target.files[0] }) }} />
When the user clicks on the field to choose a file, it immediately displays "This field is invalid" immediately below the field, as soon as the file dialog opens. While the error message is correct, it may be disconcerting for some users. We would prefer if it was only displayed if the user closes the dialog without selecting a file.
This is probably because the dialog causes the field to blur. We'd probably need to make a special case for file to only trigger touched when dialog closes (which I believe can be determined by onChange).