QTabs swipeable makes text very hard to select

[Tofandel]

What happened?

When using swipeable QTabsPanel, if you try to select some text in a normal motion (not slow) instead of selecting text, it will change tab

What did you expect to happen?

The tab not to change If the user is selecting text with it's mouse

Reproduction URL

https://codepen.io/Tofandel/pen/vYzgmKN?editors=101

How to reproduce?

1. Go to the reproduction sandbox
2. Try to select the text in the tab left to right
3. The selection disappears and the tab doesn't change
4. Try to select the text right to left
5. The tab has changed to the next tab

Flavour

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

Areas

Composables (quasar/usePanel)
Directives (quasar/TouchSwipe)

Additional context

If you go really slow you can select the text, but it's not user friendly

If I remove swipeable then it's not mobile friendly

Proposed solution

Check the current selected text before swiping and if it's not empty, abort the swipe

function getSelectedText() {
    var text = "";
    if (typeof window.getSelection != "undefined") {
        text = window.getSelection().toString();
    } else if (typeof document.selection != "undefined" && document.selection.type == "Text") {
        text = document.selection.createRange().text;
    }
    return text;
}

[rstoenescu]

Hi,

The solution offered is not ok because this would hinder the functionality if any text is selected, even outside of the panel. There is no easy way out of this, except for disabling the swipe functionality.

[Tofandel]

The way to get around this would be to compare the selected text at the start of the swipe and before triggering it, if it's the same, proceed with the swipe, if it's different, abort the swipe

The swipe is extremely usefull on devices with touch enabled (and nowadays it's not just mobiles, a lot of laptops come with both touch and trackpad making feature detection buggy) so disabling it is not really an option.

Selection is not a highly needed feature by itself and can be treated low priority, but there definitely is some solutions possible

[rstoenescu]

Wish it were that easy. Reopening for assessing an idea.

[Tofandel]

Something I noticed is this

quasar/ui/src/composables/private/use-panel.js

Lines 63 to 75 in 6948057

	const panelDirectives = computed(() => {
	// if props.swipeable
	return [ [
	TouchSwipe,
	onSwipe,
	void 0,
	{
	horizontal: props.vertical !== true,
	vertical: props.vertical,
	mouse: true
	}
	] ]
	})

Notice the mouse: true

Maybe we can give the option to disable mouse swipe for panel, which would also solve this issue

[rstoenescu]

Think I found a way to do it properly.
Need to implement for TouchSwipe/Pan/etc.

[rstoenescu]

The gist of the fix: after swipe detection starts and mouse moves, also check if any text is currently selected (previous selection, if any, was automatically discarded when swipe has started); ALSO, we were avoiding triggering swipe for INPUT elements, but we should also do this for TEXTAREA -- and this is even more important now (besides the main obvious reason), especially for Firefox (where additional work would anyway be needed besides the getSelection() API -- see firefox bug)

Fix will be available in Quasar 2.11.11

[rstoenescu]

Also, thanks for insisting with this ticket! We made Quasar better.

[Tofandel]

Well, thank you for fixing this issue. All credits to you 😉