Auto select TOTP input contents when focused #166
Conversation
|
|
||
| if ( value && '' !== value.trim() && inputRef.current.nextElementSibling ) { |
There was a problem hiding this comment.
The change handler is now only responsible for updating the input values
| ( event ) => onChange && onChange( event.target.value, event, index, inputRef ), | ||
| [] | ||
| ); | ||
| handler && handler( event.target.value, event, index, inputRef.current ); |
There was a problem hiding this comment.
I don't think the consumer needs to know about the ref, we can just pass the current value back
adamwoodnz
added
enhancement
There was a problem hiding this comment.
This works well in my testing, except, when multiple keys are pressed before the keyUp event happens.
For example, type 123123 by pressing 2 before 1 comes up, and 3 before 2 comes up and you'll see a "sluggish" UI that doesn't currently occur that misses some key presses.
Pastes still work as expected, and I'm not sure this is a real-life example that needs to be worried about, but you'll see the effect I mean if you try it..
| trunk | PR |
|---|---|
Screen.Recording.2023-05-18.at.2.55.42.pm.mov |
Screen.Recording.2023-05-18.at.2.54.46.pm.mov |
Yeah if you're a fast typer, and especially using a the numeric keypad, I can see it being potentially frustrating. Thanks, I'll see if I can improve it. |
I think this should be fixed now @dd32 |
Instead of when one is empty
adamwoodnz
force-pushed
the
add/paste-in-totp
branch
from
aa2afe3
to
345c6c4
Compare
adamwoodnz
force-pushed
the
enhance/155-totp-select-input-on-tab
branch
from
562db78
to
5c374b3
Compare
|
@adamwoodnz Better :) I'm starting to question this though, because this is downright kind of crazy..
Screen.Recording.2023-05-23.at.4.32.17.pm.mov |
Hmm let me have another look |
I've also run into these two issues. Additionally, there's another change that I find has become less convenient. Now when deleting digits, it needs continuously pressing backspace to tab backward, while originally it could be done by just holding the key down. |
Closes #155
This PR builds upon the paste handler added in #154
When an input is focused its contents are automatically selected, allowing the user to use Tab to move back and forth and type over previous values.
How to test
Combinations of typing values, tabbing forwards and backwards, pasting, delete with backspace, clear all.