search

processing / p5.js-web-editor

The p5.js Editor is a website for creating p5.js sketches, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else! You can create, share, or remix p5.js sketches without needing to download or configure anything.
https://editor.p5js.org
GNU Lesser General Public License v2.1
1.38k stars 1.32k forks source link

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

Closed PiyushChandra17 closed 4 months ago

PiyushChandra17 commented 9 months ago

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

https://github.com/processing/p5.js-web-editor/assets/47579287/e13225b6-ce76-44f0-8500-b802f88b15ea

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 commented 9 months ago

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.