FIX : Unable to Create Files or Folders Through the File Actions Modal

[lakshay-jainn]

Fixes #3329

PROBLEM:
The problem that was occurring was when clicking on Add button in Sidebar -> and then TOUCH CLICKING "Add new file"/ "Add new folder" USING TOUCHPAD . The modal for creating new file or folder was not popping up.

When interacting with a button, events fire in this order:
onMouseDown → onMouseUp → onClick → onBlur

When we Click using mouse :- It directly triggers Onclick
When we use Touch: it triggers onTouchStart and onTouchEnd, which then polyfill to onClick.
But When we TOUCH CLICK USING MOUSEPAD: it triggers onMouseDown.

The default behavior of onMouseDown is to shift focus as soon as possible.
It doesn't wait for onClick to occur.
Therefore directly executing onBlur.
And hence not opening the modal.

SOLUTION:
The most appropriate solution to this problem i found was:-
onMouseDown={(e) => e.preventDefault()}
Basically, this removes the default focus shifting behavior of onMouseDown.
And, 'waits' for onClick to execute.
After which, onBlur is executed.
Therefore, it now adds a file or folder when Touch Clicking using touchpad.

Solution executed in file:-
In p5.js-web-editor\client\modules\IDE\components\Sidebar.jsx

I have verified that this pull request:

• [ ✔] has no linting errors (npm run lint)
• [✔ ] has no test errors (npm run test)
• [✔ ] is from a uniquely-named feature branch and is up to date with the develop branch.
• [✔] is descriptively named and links to an issue number, i.e. Fixes #123

[welcome]

🎉 Thanks for opening this pull request! Please check out our contributing guidelines if you haven't already.

[release-com]

Release Environments

This Environment is provided by Release, learn more!
To see the status of the Environment click on Environment Status below.

• p5.js-web-editor
  • app-tedebc2.release.editor.p5js.org/
  • preview-tedebc2.release.editor.p5js.org/

🔧Environment Status : https://app.release.com/public/Processing%20Foundation/env-e027732142

[Jatin24062005]

@lakshay-jainn Hey, I went through your Pull Request, and it looks like it’s working now. However, could you please add the same line of code to the button below, which appears when the user is authenticated? This will ensure the fix applies to each sidebar button. Additionally, this will help the maintainers review the changes more quickly. Thank You for working on these.

[lakshay-jainn]

@Jatin24062005 hello , sorry i didn't look the third button as i wasn't logged in. I added this fix for that upload button too. Thank you for quick reply.

[raclim]

Thanks so much @lakshay-jainn for working on this and @Jatin24062005 for reviewing and confirming the fix!

Although I still haven't been able to recreate the issue myself, I think what's going on in the file so far makes sense to me. I went ahead with removing a a few comments that I felt were self-explanatory. I'm going to merge this in, but please feel free to follow up with any additional thoughts or other PRs, thanks!