Tab panels swipeable & Textarea selection swipes tab panel

[turigeza]

So when you put a textarea into a tab panel which is swipeable you can not select the text in the tab panel by mouse drag.

To help you understand the problem I created a pen. Go and try and select the text in both the input element as well as textarea element. You will notice that you won’t be able to select the text in the textarea (unless you are a Ninja) while you can in the input element.

https://codepen.io/turigeza/pen/qBOgbQG?editable=true&editors=101%3Dhttps%3A%2F%2Fquasar.dev%2Fvue-components%2Ftabs

What is the neatest way to keep the panel to be swipeable but allow text selection ?

Thank you for helping,

[metalsadman]

Im able, but ofc not on the surface where there is no text.

[turigeza]

@metalsadman You are a Ninja : ) I wonder if it’s limited to my computer. I’ll go and see the windows machine see if that works.

[turigeza]

@metalsadman Well I went an tested on windows chrome and firefox and it is identical.
The left and right movement of the mouse will swipe the tab and I can not select text.

I guess I forgot to mention that you select the text left to right or right to left and not up and down.

This is on the textarea. The input works just fine.

[turigeza]

@metalsadman Here you can see what is happening
https://www.youtube.com/watch?v=KV1VaPz-n0Y

[metalsadman]

@turigeza it does require a bit of ninjutsu :), but i can select it.

[turigeza]

@metalsadman

I see : ) I can do it now as well. If you hang on the same spot for a second once mouse is down after that you can do whatever the panel will not move.
But can you also reproduce the issue I am talking about or no ?

[turigeza]

@mousedown.stop on the textarea solves this issue for now.
https://codepen.io/turigeza/pen/jObJJYR?editors=1010

  <q-tab-panel name="mails">
            <div class="text-h6">Mails</div>
            <div>
              <q-input v-model="text" label="Standard" />
              </div>
             <div>
              <q-input v-model="textarea" label="Standard" type="textarea" @mousedown.stop />
            </div>
          </q-tab-panel>

[turigeza]

IN case anybody comes across this I have ended up disabling swipe on q-tab-panels on devices which are not touch enabled. I think it make more sense this way and you can select text this way too which also caused issue in the past.

<q-tab-panels class="col rounded-borders" v-model="_active_tab" animated keep-alive infinite :swipeable="$q.platform.has.touch">