ios-input-focus.md

iOS restrictions re: bringing up the keyboard on programmatic focus

I can't find exact specifications on this, but it seems that iOS restricts bringing up the keyboard via programmatically focusing on <input>. It only brings up the keyboard in response to explicit user interaction.

1. iOS focus on input field only brings up keyboard when called inside a click handler.
2. It doesn’t work if the focus is async.

This presents a curious problem when you want to autofocus an input inside a modal or lightbox, since what you generally do is click on a button to bring up the lightbox, and then focus on the input after the lightbox has been opened. Without anything fancy, it actually works ok. The problem shows up when you try to add something fancy like a setTimeout or a promise.then(). I don't know why people would want to use a setTimeout here, but waiting for a promise is actually a pretty common use case. E.g. we try to batch dom manipulations like getting a lightbox to show up inside requestAnimationFrame. Also, it's possible that people would want to asynchronously wait for XHRs / data fetches. In any case, that use case is currently not supported by webkit / iOS.

Examples

• Vanilla onClick focus works: https://codepen.io/cathyxz/pen/XELrjO
• Promise with dom manipulation then focus works: https://codepen.io/cathyxz/pen/bMbypd
• Promise waiting for setTimeout then focus does NOT work: https://codepen.io/cathyxz/pen/odvRpm
• Promise with rAF then focus does NOT work: https://codepen.io/cathyxz/pen/QrLRvK
• setTimeout focus does NOT work: https://codepen.io/cathyxz/pen/debEog

References

• https://medium.com/@brunn/autofocus-in-ios-safari-458215514a5f
• vuejs/vue#7546
• https://stackoverflow.com/questions/12204571/mobile-safari-javascript-focus-method-on-inputfield-only-works-with-click

I spent a long time searching for this without success, so I'm documenting it here for anyone else that runs into the same issue.

For reference, we ran into this issue, which was hackily solved by this solution.

A setTimeout solution: https://stackoverflow.com/a/55652503

wow that's ugly 😅

Thanks for aggregating and publishing this information!! Saved us a lot of time this week 🥇

nothing helps in vuejs

If anyone needs the opposite (prevent keyboard from showing up when they tap an input), this code may serve your needs...

let running: boolean = false;
let input: HTMLInputElement

async function cursedFocus(this: HTMLInputElement, e: FocusEvent) {
    if( !running ){
        running = true;
            inp.readOnly = true;
            inp.blur();
            inp.focus()
            inp.readOnly = false;
        running = false;
    }
}

input.addEventListener('focusin', cursedFocus);

Text selection otherwise still works... so if you want to just use your own software keyboard, this is your workaround 😉