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.3k stars 1.27k forks source link

Collections Rename Input Fails to Autofocus. #2986

Open Ri-Sharma opened 5 months ago

Ri-Sharma commented 5 months ago

Actual Behavior

When attempting to rename a collection, the input field does not automatically focus, leading to a slight inconvenience in the user experience.

Expected Behavior

Upon pressing the rename button, the input field should autofocus, similar to the behavior observed when renaming a sketch

Steps to reproduce:

  1. Navigate to a collections page.
  2. Select the rename option from the dropdown of any collection. (You have to manually click on the input field or click on the rename option again to focus.)
lindapaiste commented 5 months ago

Somewhat related to #2383

lindapaiste commented 5 months ago

Ha - I removed the tag "Bug" because I was thinking that this was more of an enhancement. But then I looked at your PR and I see that we already have code which is supposed to handle the autofocus. It doesn't work so I guess it is a bug after all 🙃

It seems like the 

if (renameInput.current) {
   renameInput.current.focus();
 }

is getting called too early - before the input is mounted and therefore it doesn't do anything. One fix might be to wrap that part in a setTimeout with a 0 ms delay, such that it gets executed on the next render.