Conversation
hooks/useAutoFocusFirstInput.tsx
Outdated
| }, 100) | ||
| } | ||
|
|
||
| document.addEventListener('click', handleClick) |
There was a problem hiding this comment.
Not working well, clicking in another field refocuses the first field.
hooks/useAutoFocusFirstInput.tsx
Outdated
|
|
||
| function useAutoFocusFirstInput (): void { | ||
| useEffect(() => { | ||
| const focusFirstInput = (element = document): void => { |
There was a problem hiding this comment.
Why have this default parameter and then call with it anyway, below?
e07c315 to
fc6ddee
Compare
chedieck
left a comment
There was a problem hiding this comment.
This is not a good solution.
The idea of using an event listener to click events to focus the first input is a bad idea, clicks can have thousands of applications, and this is evident from all the bugs this PR introduces.
Some I found:
- Selecting a wallet in the creation button form will refocus the button name input
- Can't select a timezone on the account view anymore
- Misclicking a radio selection in the wallet edit will annoyingly refocus the first input, scrolling up the modal
- Ordering a column in the txs table of the button view page will focus POST URL trigger input, also annoyingly scrolling downwards if there are enough entries/tables.
In summary, the overall experience of having the first input focused after clicking anywhere is just bad UX.
I much rather that this is done cleanly having to edit all files that have some kind of form than this general solution that creates more problems than it solves.
Fair enough, I see how this can bring some issues, we don't have many modal forms so I can go in each for and autofocus the first input |
fc6ddee to
01f6935
Compare
chedieck
left a comment
There was a problem hiding this comment.
works well, clean code.
Related to #542
Description
Added a generic hook to autoFocus first input of forms in the dashboard
Test plan