Clicking on `cross` icon on create folder/create file modal throws validation error message for a while

[PiyushChandra17]

p5.js version

2.10.2

What is your operating system?

Mac OS

Web browser and version

Chrome and 117.0.5938.132

Actual Behavior

Clicking on cross icon on create folder/create file modal throws validation error message for a while

close-validation-message.mov

Expected Behavior

Clicking on cross icon on create folder/create file modal should not throw validation error message for a while ( Perhaps clicking on anywhere outside the name input box should display the validation error message)

Steps to reproduce

Steps:

1. Click on "+" icon
2. Click on either create folder or create file
3. Click on close icon
4. Verify the validation error message displays for a while

[lindapaiste]

We have to think about the conditions where the validation error should and should not throw, and how those could be implemented. Here's my idea:

Right now we disable the "Add File" (submit) button until the form is valid. We would remove that condition such that the button is always clickable. We would only show validation error messages if the form has been submitted. We would not call the dispatch when submitting unless the form is valid. If it has been submitted once and rejected, then we keep showing errors as they edit it until the input field is valid.

1. Open modal -> don't type anything -> close modal -> no error
2. Open modal -> type something invalid -> close modal -> no error
3. Open modal -> type something invalid -> click submit button -> show error
4. Open modal -> type something invalid -> click submit button -> show error -> go back input and change it -> continue showing errors until valid

BTW the situations outlined about are something that we could write unit tests for, if anyone is interested in gaining testing experience.

Generally we don't show errors on a form unless it has been focused, but that doesn't do anything here because we automatically call .focus() on the input so touched is always true.