QScrollArea requires two taps to trigger click event on elements contained within [iOS]

[thexeos]

What happened?

The way Safari was programmed to work, means that having a @mouseenter event that modifies DOM prevents event like @mouseup and @click from being triggered down the DOM tree. In case of QScrollArea, @mouseenter event is used to display the scroll thumb, which means that a second tap is required to interact with elements within QScrollArea.

Taken from this Safari documentation page

What did you expect to happen?

Now, Apple would not be Apple if it was consistent with its issues. This does not happen on some devices and happens on others, but I was able to successfully reproduce this with BrowserStack. I checked WebKit code, but I couldn't find any specific reference to the implementation of this behavior.

Quasar code that triggers this Safari issue is this one:

quasar/ui/src/components/scroll-area/QScrollArea.js

Lines 355 to 357 in f8b4582

	function onMouseenter () {
	hover.value = true
	}

Reproduction URL

NA

How to reproduce?

The workaround requires delaying any DOM modifications until a short cooldown period had passed. From my testing, we don't have to wait until mouseup event had triggered, but making modification within setTimeout(0), rAF() or nextTick() leaves insufficient delay. Making it a capture event doesn't make a difference either. The safest approach that I found is to do:

function onMouseenter () {
  setTimeout(() => {
    hover.value = true
  }, proxy.$q.platform.is.ios ? 50 : 0)
}

The 50ms delay is arbitrary, but it seems to work for me every time.

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Components (quasar)

Platforms/Browsers

iOS

Quasar info output

No response

Relevant log output

No response

Additional context

Current behavior:

With the proposed change:

[github-actions]

Hi @thexeos! 👋

It looks like you provided an invalid or unsupported reproduction URL.
Do not use any service other than Codepen, jsFiddle, StackBlitz, Codesandbox, and GitHub.
Make sure the URL you provided is correct and reachable. You can test it by visiting it in a private tab, another device, etc.
Please edit your original post above and provide a valid reproduction URL as explained.

Without a proper reproduction, your issue will have to get closed.

Thank you for your collaboration. 👏

[HacMan137]

Thank you for making an issue and MR for this. I have the same issue in my project. Hoping your MR gets merged soon. Out of curiosity, do you know of any work-arounds that could be used to fix this issue in the short term that don't involve patching the quasar source?

[thexeos]

@HacMan137 I don't know of any other way other than applying the patch to your local copy of Quasar in node_modules.

[rstoenescu]

Fix will be available in Quasar v2.12.8.
Thank you for the detailed explanation and also for providing a PR!