chrisdancee / react-ios-pwa-prompt

A native styled 'Add to Home Screen' React component for PWAs on iOS
react-ios-pwa-prompt.vercel.app
169 stars 39 forks source link

Keyboard rendering fix #53

Closed chrisdancee closed 4 years ago

chrisdancee commented 4 years ago

Merges https://github.com/chrisdancee/react-ios-pwa-prompt/pull/47 with latest changes from master

When a text input field has autofocus set (e.g. the email field on a login page), the input can grab focus and cause the keyboard to open. The keyboard then obscures the PWA prompt and the user must close the keyboard to see the entire prompt. Since the prompt is meant to be a modal, this commit automatically blurs any element that has focus when it gets rendered, which should fix the problem. Unfortunately, in my testing, the problem didn’t consistently appear on iOS. But this fix does appear to ensure that the text field that normally would have focus on a page load doesn’t.