Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
arnesten opened this issue Jan 27, 2018 · 19 comments
Closed

Comments

@arnesten
Copy link

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.

@arnesten arnesten changed the title iPad/iPhone keyboard is not shown when input gets focus (worked in Vue 2.4.x) iPad/iPhone keyboard is not shown when input gets focus (works in Vue 2.4.x) Jan 27, 2018
@Giwayume
Copy link

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
Copy link
Author

arnesten commented Feb 16, 2018

@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
Copy link

@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
Copy link
Author

@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
Copy link
Member

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
Copy link

yarnball commented Aug 20, 2018

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
Copy link

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
Copy link

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
Copy link

Hello,

any updates on that?

@yyx990803
Copy link
Member

Closed via #8450 (will be out in 2.6)

@zhoufeifan
Copy link

Closed via #8450 (will be out in 2.6)

Could you tell me that when vue 2.6 release ?

@pouu69
Copy link

pouu69 commented Feb 15, 2019

Could you tell me that when vue 2.6 release ?

@philiprenich
Copy link

@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
Copy link

pouu69 commented Feb 28, 2019

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
Copy link

schniper commented Mar 4, 2019

Also experiencing this with Quasar

@AndrewBogdanovTSS
Copy link

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

@chinnichaitanya
Copy link

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

@rgfretes
Copy link

rgfretes commented Aug 6, 2020

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

@zindont
Copy link

zindont commented Oct 2, 2023

+1 still issue on 2.7.14

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests