You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
What you were expecting:
When using a form in modes all, onChange, onBlur the FileInput's error text and validation messages are not displayed when a user uses the file dialog to select files from their file system.
What happened instead:
The FileInput's isTouched field state does not get updated when the file dialog is used to select files. This results in the error text not being updated and displayed. This does work when they are dropped however.
Steps to reproduce:
This is just an example, we are using this in an enterprise edition WizardForm, which defaults the validation mode to onChange. Though the behavior is the same.
Download the three sample text files located below (or create your own if you don't trust them) you need 3 since the validation is allowing only two files. file1.txt file2.txt file3.txt
Use the attached sandbox and open the following file src/comments/CommentCreate.tsx you'll notice I have created a duplicate of the FileInput source code in the same directory. In this clone I have added the isDirty fieldState and onBlur field function call.
Click on the Comments side menu and navigate to the create view. You will see two FileInputs, use the attached files and attempt to submit all three with the file dialog important do not drop. On the first FileInput, the validation will fire and the error text will be displayed. Attempt the same with the second FileInput, you'll notice the error state is not shown.
Two possible solutions are apparent to me, one is to change the isTouched check to isDirty though I'm not sure how that fit in with the current approach.
The second is to use the onBlur in the onDrop function for the FileInput.
I have the changes on a development branch and I can create a PR if you let me know which solution above or otherwise you'd like to implement.
Thanks for the detailed explanations and reproduction.
IMO the fix would not so much be to change the condition under which we display the validation error, but rather to fix the input to change its state correctly. When the input is changed I would expect it to appear as 'touched'.
But you were right, the root cause was the missing call to onBlur.
Hence I'll open a PR to add this missing call.
What you were expecting:
When using a form in modes all, onChange, onBlur the FileInput's error text and validation messages are not displayed when a user uses the file dialog to select files from their file system.
What happened instead:
The FileInput's isTouched field state does not get updated when the file dialog is used to select files. This results in the error text not being updated and displayed. This does work when they are dropped however.
Steps to reproduce:
This is just an example, we are using this in an enterprise edition WizardForm, which defaults the validation mode to onChange. Though the behavior is the same.
Download the three sample text files located below (or create your own if you don't trust them) you need 3 since the validation is allowing only two files.
file1.txt
file2.txt
file3.txt
Use the attached sandbox and open the following file src/comments/CommentCreate.tsx you'll notice I have created a duplicate of the FileInput source code in the same directory. In this clone I have added the isDirty fieldState and onBlur field function call.
Click on the Comments side menu and navigate to the create view. You will see two FileInputs, use the attached files and attempt to submit all three with the file dialog important do not drop. On the first FileInput, the validation will fire and the error text will be displayed. Attempt the same with the second FileInput, you'll notice the error state is not shown.
Related code:
Please see the following sandbox
Environment
The text was updated successfully, but these errors were encountered: