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

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)

@siblingpastry Very interesting, thanks! What does FKA stands for? Flyover Keyboard Andsomething?
@meduz Full Keyboard Access. Without that enabled, you can only Tab to form controls, whereas FKA lets you Tab to links and anything focusable.