-
-
Notifications
You must be signed in to change notification settings - Fork 33.7k
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
Comments
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. |
@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. |
@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. |
@Giwayume 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. |
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. |
This is still an issue for me. Has it been addressed/fixed? Example: Parent component
Child component
|
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";
}
} |
i got same problem with vue version 2.5.17 when i change vue version 2.4.4 it works this.$nextTick(() => { |
Hello, any updates on that? |
Closed via #8450 (will be out in 2.6) |
Could you tell me that when vue 2.6 release ? |
Could you tell me that when vue 2.6 release ? |
@pouu69 2.6 has been released already - https://github.com/vuejs/vue/releases |
i have been upgraded vue v2.6.7 and i wrote below code this.$nextTick(this.$refs.etcInputRef.focus) but iphone not shown keyboard |
Also experiencing this with Quasar |
I use Vue 2.6.10 but it's still reproducible. Keyboard not showing only on iOS, Android works well |
I'm on the latest Vue 2.6.11. The issue still exists in the iPhone and iPad. But works well for Android. |
Is there any news regarding this bug? I can still reproduce it on v2.6.11 |
+1 still issue on 2.7.14 |
Version
2.5.13
Reproduction link
https://codepen.io/arnesten/pen/zROvgE
Steps to reproduce
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.
The text was updated successfully, but these errors were encountered: