1

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

  1. Installing 2 PWA apps (save them to Home Screen)
  2. Open the 1st app, focus on input fields (my website) => keyboard was showing properly
  3. Click to Home button, back to Home Screen
  4. 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...

Sample screenshot

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>
tú anh
  • 11
  • 3

0 Answers0