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 · 15 comments

Comments

@arnesten
Copy link

@arnesten arnesten commented Jan 27, 2018

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

This comment has been minimized.

Copy link

@Giwayume Giwayume commented Feb 15, 2018

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

This comment has been minimized.

Copy link
Author

@arnesten 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

This comment has been minimized.

Copy link

@Giwayume Giwayume commented Feb 16, 2018

@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

This comment has been minimized.

Copy link
Author

@arnesten arnesten commented Feb 16, 2018

@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

This comment has been minimized.

Copy link
Member

@HerringtonDarkholme HerringtonDarkholme commented Feb 28, 2018

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 comment has been minimized.

Copy link

@yarnball 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

This comment has been minimized.

Copy link

@falstack falstack commented Aug 20, 2018

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

This comment has been minimized.

Copy link

@atheneliu atheneliu commented Dec 11, 2018

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

This comment has been minimized.

Copy link

@vlahanas vlahanas commented Dec 19, 2018

Hello,

any updates on that?

yyx990803 added a commit that referenced this issue Dec 19, 2018
@yyx990803

This comment has been minimized.

Copy link
Member

@yyx990803 yyx990803 commented Dec 19, 2018

Closed via #8450 (will be out in 2.6)

@yyx990803 yyx990803 closed this Dec 19, 2018
@zhoufeifan

This comment has been minimized.

Copy link

@zhoufeifan zhoufeifan commented Jan 7, 2019

Closed via #8450 (will be out in 2.6)

Could you tell me that when vue 2.6 release ?

@pouu69

This comment has been minimized.

Copy link

@pouu69 pouu69 commented Feb 15, 2019

Could you tell me that when vue 2.6 release ?

@philiprenich

This comment has been minimized.

Copy link

@philiprenich philiprenich commented Feb 15, 2019

@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

This comment has been minimized.

Copy link

@pouu69 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

This comment has been minimized.

Copy link

@schniper schniper commented Mar 4, 2019

Also experiencing this with Quasar

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
You can’t perform that action at this time.