iPad/iPhone keyboard is not shown when input gets focus (works in Vue 2.4.x)

[arnesten]

Version

2.5.13

Reproduction link

https://codepen.io/arnesten/pen/zROvgE

Steps to reproduce

1. Open link on iPad or iPhone
2. Tap on the text

What is expected?

An input becomes visible and gets focus and the on-screen keyboard on iPad/iPhone is shown.

What is actually happening?

An input becomes visible and gets focus but the on-screen keyboard on iPad/iPhone is NOT shown.

---

This works for Vue 2.4.4. Test here:
https://codepen.io/arnesten/pen/JpPYmO

It stopped working for Vue 2.5.0. Test here:
https://codepen.io/arnesten/pen/wywKLw

In our web app, we use the UI pattern of clicking on a text (or icon) to start editing something on many places. With Vue 2.4.x iPad/iPhone users would only need to tap once to show the input/textarea and have the on-screen keyboard appear. For 2.5.x iPad/iPhone, they need to tap twice. One time to show the input/textarea and one more time to make the on-screen keyboard appear.

[Giwayume]

I'm not so sure this is a Vue issue. iOS is really terrible at detecting when to show the on-screen keyboard in web browsers at times. This is likely an iOS bug you could reproduce with some simple vanilla Javascript show/hide.

[arnesten]

@Giwayume The exact same code is showing the keyboard on focus in Vue 2.4.4. But from Vue 2.5.0 it does not show the keyboard. If you have an iOS device you can try the links above yourself.

Edit: If I'm using vanilla JS to do the same thing, the keyboard is shown.

[Giwayume]

@arnesten I understand you didn't change code, just pointing out that Vue would be coding workarounds to iOS bugs. It's the phone's responsibility to show the keyboard since there is no Javascript API that can tell it to.

[arnesten]

@Giwayume
I don't know if it can be classified as a bug in iOS, since there is no specification of how the on-screen keyboard should behave. I think the problem is that there is too much delay between the user doing a click and Vue 2.5.0+ updating the DOM and setting focus on the input. In Vue 2.4.4 this delay was shorter so then it worked fine with iOS.

It is quite common to have a search icon in a mobile web app that you can click on to show and focus a search input. Not opening the keyboard but instead requiring you to do a second click is a relatively big UX issue in that case. So hopefully a fix, or at least a workaround other than downgrading to Vue 2.4.4, can be found for this situation.

[HerringtonDarkholme]

I guess this is another issue of micro/macro task introduced in 2.5. https://github.com/vuejs/vue/releases/tag/v2.5.0

iOS requires user input for showing keyboard. Before Vue uses micro task so user click counts as a valid trigger for keyboard. However, in 2.5 we uses macro task so iOS no longer treats it as trigger.

[yarnball]

This is still an issue for me.

Has it been addressed/fixed?

Example:
https://codesandbox.io/s/m53vx15rny

Parent component

<template>
<div>
  <TextComp v-if='showText' />
  <button @click='showText = !showText'> Show/hide input </button>
</div>
 
</template>
 ...

Child component

<template>
<div>
   <input autoFocus type='text'/>
</div>
 
</template>
 
<script>
 
export default {
  name: 'TextComp',
}
 
</script>

[falstack]

I resolve this issue by this:

<div class="page-container">
  <div v-if='showDialog" class="dlalog">
    <div class="footer">
      <button @click="submit">submit</button>
    </div>
  </div>
  <textarea id="textarea">this area fixed, and default display = none</textarea>
  <button class="open-dialog-btn" @click="openDialog">open dialog</button>
</div>

mounted() {
  document.getElementById("page-container").addEventListener("click", e => {
    if (/open-dialog-btn/.test(e.target.className)) {
      document.getElementById("textarea").style.display = "block";
      document.getElementById("textarea").focus();
    }
  });
},
methods{
  openDialog() {
    this.showDialog = true
  },
  submit() {
    this.showDialog = false
    document.getElementById("textarea").style.display = "none";
  }
}

[atheneliu]

i got same problem with vue version 2.5.17 when i change vue version 2.4.4 it works

this.$nextTick(() => {
this.$refs.textarea.focus()
})

[vlahanas]

Hello,

any updates on that?

[yyx990803]

Closed via #8450 (will be out in 2.6)

[zhoufeifan]

Closed via #8450 (will be out in 2.6)

Could you tell me that when vue 2.6 release ?

[pouu69]

Could you tell me that when vue 2.6 release ?

[philiprenich]

@pouu69 2.6 has been released already - https://github.com/vuejs/vue/releases
(though I haven't used it and tested against my instance of this bug)

[pouu69]

i have been upgraded vue v2.6.7 and i wrote below code

        this.$nextTick(this.$refs.etcInputRef.focus)

but iphone not shown keyboard

[schniper]

Also experiencing this with Quasar

[AndrewBogdanovTSS]

I use Vue 2.6.10 but it's still reproducible. Keyboard not showing only on iOS, Android works well

[chinnichaitanya]

I'm on the latest Vue 2.6.11. The issue still exists in the iPhone and iPad. But works well for Android.

[rgfretes]

Is there any news regarding this bug? I can still reproduce it on v2.6.11

[zindont]

+1 still issue on 2.7.14