Keep Focus and Move On

or

How to keep the keyboard open when switching show/hide the password input visibility

Let's use the example bellow

if you are already focused typing and just want to check what did you type to keed typing, your keyboard is going to close

You need to notice it closed, and decide to touch the input to focus and get back to typing, it affects both desktop and mobile applications on the web

See it in practice in a real life example and just image how frustrating it can be:

How to keep focus?

When the user interact with the show/hide button we can directly call the focus method on the input element

Solved

Now on the next example, when you show/hide the input password the focus is preserved, which also keep keyboards open on iOS and Android devices

Try it yourself, it is quite pleasant

Keep in mind

If the input is not focused already, and someone interact with the show/hide button it must not focus the input

Conclusions

If you see problems regardless accessibility, please let me know by emailing me at [email protected] and I'll update this page accordingly

Thanks for building!