James Edwards

I recently learned of an issue on the iPhone (but not iPad) when using FKA -- if you tab from an `<input>` to a `<select>`, the menu opens automatically, but when you choose an option or ESC to close it, focus resets to the top of the page, creating a keyboard trap.

Here's the fix: https://codepen.io/TPG/pen/LYozjOX

#javascript #ios #iphone #fka

Jun 11, 2024 at 11:37amWeb
Show threadJames EdwardsJun 11, 2024

It takes advantage of the event properties of the auto-blur behavior, whereby `relatedTarget` is null.

UPDATE: However this can also happen in other browsers, when an element blurs to a non-focusable element, so I've added a condition that only applies it to iOS.

Here's a demo: https://cdpn.io/pen/debug/LYozjOX

CodePen - Fix for iPhone <select> behavior (prevent auto-blur keyboard trap)

Show threadmeduz'Jun 11, 2024
@siblingpastry Very interesting, thanks! What does FKA stands for? Flyover Keyboard Andsomething?
Show threadJames EdwardsJun 11, 2024
@meduz Full Keyboard Access. Without that enabled, you can only Tab to form controls, whereas FKA lets you Tab to links and anything focusable.
Show threadPetterOfCatsJun 11, 2024
@siblingpastry there’s an ESC key on iPhones?
Show threadJames EdwardsJun 11, 2024

@PetterOfCats This is for users who rely on an external keyboard (so they can only navigate forward and backward, they can't just tap anywhere).

Although the focus reset still happens with touch interaction and Voice Control, it doesn't matter so much. However this solution fixes that as well.