Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

FileInput does not show error validation text when mode is all, onChange or onBlur when file dialog is used to select files #9450

Closed
wattry opened this issue Nov 15, 2023 · 3 comments · Fixed by #9459
Labels

Comments

@wattry
Copy link

wattry commented Nov 15, 2023

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

  • React-admin version: 4.15.0
  • React version: 17.0.2
  • Browser: Chromium
@wattry
Copy link
Author

wattry commented Nov 15, 2023

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.

@wattry
Copy link
Author

wattry commented Nov 15, 2023

This is a recreation of this as it was closed incorrectly.

@erwanMarmelab erwanMarmelab self-assigned this Nov 16, 2023
@slax57 slax57 added the bug label Nov 20, 2023
@slax57
Copy link
Contributor

slax57 commented Nov 20, 2023

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.

Thanks again for the report and the analysis!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
3 participants