I have run into a problems with iPhone default keyboard while using NuxtJS.
It happened when I installed 2 PWA apps to homescreen. The keyboard was missing (refer my screenshot for example).
Steps to reproduce problems
- Installing 2 PWA apps (save them to Home Screen)
- Open the 1st app, focus on input fields (my website) => keyboard was showing properly
- Click to Home button, back to Home Screen
- Open the 2nd app, focus on input fields (in this case I used Pinterest) => keyboard was missing on this step
It works on Android perfectly...
Source code for this problems, FYI
<ValidationProvider :name="$t('authenticate.form_data._email')" vid="email" rules="required|email" v-slot="{ errors }">
<div class="email-input mb-4">
<label for="email" class="block text-gray-400 text-sm mb-1">
{{ $t('authenticate.form_data._email') }}</label>
<input id="email"
class="shadow appearance-none borderrounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline"
type="text"
:placeholder="$t('authenticate.form_data._email_pl')"
aria-describedby="emailHelp"
v-model="formData.email"
autofocus
@blur="hiddenKeyboard"
ref="inputFocus">
<span class="text-xs text-red-700" id="emailHelp">{{
errors[0]
}}</span>
</div>
</ValidationProvider>