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
Single-tap outside a QDialog or QSelect doesn't work in Cordova iOS app. Have to double-tap. #13619
Comments
Hi @skmbr! 👋 It looks like you provided an invalid or unsupported reproduction URL. Without a proper reproduction, your issue will have to get closed. Thank you for your collaboration. 👏 |
So, I wonder if this has to do with the issue I opened (#11582). Looking at @skmbr do you have access to debug the webview? There is an event listener for fastclick that you could try disabling.
|
Thanks for the reply @MatthewSH I can remote debug via Safari. I've had a look at the event listeners on the dialog backdrop div and can see fastclick mentioned in the click event, but disabling it didn't seem to help. Could you give me any more info on how you did it? I've also tried adding a |
I'm also seeing the same issue with QSelect components... only a double-tap outside will close them under cordova/ios. A single tap causes the QSelect to lose focus, but I still have to double-tap too to get it to close. |
If I recall, I had to disable it on the body tag or |
Thanks @MatthewSH I've tried disabling it on both of those, but it seems to affect everywhere, whatever element you have selected at the time. I've also tried various variations of the last post on this thread: https://forum.quasar-framework.org/topic/608/disable-fastclick-on-0-13/4?_=1654556785368&lang=en-GB but adding it to "boot" rather than plugins and tried If anyone can suggest anything else I might try, or tell me how fastclick might be completely disabled to see if it is the problem, I would be very grateful! |
I am also encountering the same error. So I added a close button to the "q-select" slot |
Are you using the recommended WebView or are you relying on the stock Cordova one? Because it makes a huge difference. |
I'm on cordova-ios 6.2 so I'm using the built in WKWebView. UIWebView got removed in cordova-ios 6.0. Is that what you mean? I think the docs here are out of date as the wkwebview plugin is now obsolete: |
@rstoenescu Yes, I am using the recommended one. Ionic-Webview |
@rstoenescu Same problem here but in the context of a PWA installed on iOS (not cordova/capacitor), so i guess i don't have a chance to configure something like https://quasar.dev/quasar-cli-webpack/developing-cordova-apps/preparation#switching-to-ios-wkwebview. File input buttons, mapbox-geocoder-control and more suffer from requiring double taps. Also tried
|
@rstoenescu I'd also be extremely greatful to know the answers to @manuel-ch 's question. Could #13653 also be fastclick related? Would really appreciate any suggestions on solving or working around these issues as I have a release deadline fast approaching and will need to look into building my own dialog and textarea components if there's no official solution on the horizon. |
@skmbr I have a bit of a workaround for this, it's not ideal but seems to work (sorry I still use options API). <template>
<q-dialog
v-model="_modelValue"
transition-show="slide-up"
transition-hide="slide-down"
:position="position || 'bottom'"
>
<slot/>
</q-dialog>
</template>
<script>
export default {
props: ["modelValue", "position"],
emits: ["update:model-value"],
computed: {
_modelValue: {
get () { return this.modelValue },
set (value) { this.$emit('update:model-value', value) },
},
},
watch: {
async _modelValue(newVal) {
if (newVal) {
await this.$nextTick();
}
const background = document.querySelector('.q-dialog__backdrop');
if (newVal) {
background.addEventListener('click', () => this.clicked());
} else {
background.removeEventListener('click', () => this.clicked());
}
}
},
methods: {
clicked() {
this._modelValue = false;
}
}
}
</script>
|
I also encounter this breaking issue and this needs a fix ASAP. For the meantime I've created this work around hope this helps @skmbr openDialog() {
}, |
Thank you @dblythy and @mamonnnn for both of your suggestions. I will give them a go. I ended up building my own very simple dialog component to use in a few key places in order to get our latest release out, as there's been no "official" input on this issue, but obviously I'd rather not be reinventing the wheel! Hopefully an official fix will happen at some point 🤞 |
My app, which is a PWA, suffers from this exact issue on iOS so I don't think it's a Cordova-issue; it seems to manifest itself only when running in a dedicated webview; my PWA has to be added to the home-screen and accesses from there in order for the problem to appear. The problem is clear as day, as you can add https://quasar.dev to the home-screen, access it from there and see the problem in action: RPReplay_Final1668605262.movI've gotten an earful from my end-users because of this 👎 I don't know if it's related, but I also have a @dblclick-handler on a q-tab which ends up requiring three taps in order to trigger. That's just crazy. Can we please have someone from the Quasar-team look at this? |
Could we have an update from @rstoenescu or somebody on the Quasar team on whether there are any plans to fix or investigate this issue? I think it's clear from @piperone's comments above, and @manuel-ch back in June, that this is also happening in PWA's so is more than just a Cordova issue. I'm currently working on features that use QDialog and it's features quite heavily and It would be very useful to know if there is a possibility of a fix soon before I have to build a load more funtionality from scratch or use more clunky workarounds before I can get another release out. Any information at all would be appreciated. |
I cannot reproduce it on iOS with the so-called pwa (link on home) |
I've just tested this myself on an iOS 15.6 iPhone SE and an iOS 16.2 iPhone 11 Pro Max, adding Quasar.dev to the home screen from safari, and going to the page for the QDialog component. I can reproduce with a quick tap. If I hold the tap for a fraction of a second before lifting my finger then it does sometime register, but a literal "tap" does not. A quick tap of the same speed registers fine on any other interactive element on the page, such as a link, or the API browser at the top of the page. A double tap of the same speed also does work to dismiss a dialog, but not a single tap. If I had to theorise, it almost seems like there is some sort of minimum duration threshold between mousedown and mouseup events that means a normal tap can be too quick. |
The same tests here, except 16.2 does not exist (at least not for me) and it's 16.1.1 - and all works as expected. |
Hi ! |
What happened?
The user has to double-tap outside a QDialog to close it when the app is built for cordova/iOS. Single tap doesn't do anything.
What did you expect to happen?
For the QDialog to be closed when a single tap is made outside of it.
Reproduction URL
n/a
How to reproduce?
It's only when it's running through Cordova on iOS, either via
build
ordev
When trying via dev I stopped
quasar dev -m cordova -T ios
and ranquasar dev
, then went back to the app on the phone without rebuilding.It then only needed a single tap outside a QDialog to dismiss it. When I ran
quasar dev -m cordova -T ios
again and returned to the app I need double tap again.Flavour
Quasar CLI with Webpack (@quasar/cli | @quasar/app-webpack)
Areas
Components (quasar), Cordova Mode
Platforms/Browsers
iOS
Quasar info output
Relevant log output
No response
Additional context
Single tap works as it should on Android, as does single click in Chrome or Safari when I'm developing on Desktop, or even when I access the dev server over the network on iOS Safari.
The text was updated successfully, but these errors were encountered: