fix(TouchSwipe): should not trigger if user is trying to select text …

…with the mouse quasarframework#15503
pdanpdan · Apr 27, 2023 · 99d712e · 99d712e
1 parent 03de8ee
commit 99d712e
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 2 deletions.
diff --git a/ui/dev/src/pages/touch-directives/touch-swipe.vue b/ui/dev/src/pages/touch-directives/touch-swipe.vue
@@ -122,6 +122,42 @@
           </div>
         </div>
       </div>
+
+      <p class="caption q-mt-xl">
+        Should not swipe in tab panel below if user is selecting text with the mouse:
+      </p>
+      <q-tab-panels
+        v-model="tab"
+        animated
+        swipeable
+        transition-prev="jump-up"
+        transition-next="jump-up"
+      >
+        <q-tab-panel name="mails">
+          <div class="text-h4 q-mb-md">Mails</div>
+          <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus obcaecati commodi minima assumenda consectetur culpa fuga nulla ullam. In, libero.</p>
+          <textarea>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus obcaecati commodi minima assumenda consectetur culpa fuga nulla ullam. In, libero.</textarea>
+          <input v-model="text" />
+          <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus obcaecati commodi minima assumenda consectetur culpa fuga nulla ullam. In, libero.</p>
+        </q-tab-panel>
+
+        <q-tab-panel name="alarms">
+          <div class="text-h4 q-mb-md">Alarms</div>
+          <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus obcaecati commodi minima assumenda consectetur culpa fuga nulla ullam. In, libero.</p>
+          <textarea>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus obcaecati commodi minima assumenda consectetur culpa fuga nulla ullam. In, libero.</textarea>
+          <input v-model="text" />
+          <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus obcaecati commodi minima assumenda consectetur culpa fuga nulla ullam. In, libero.</p>
+        </q-tab-panel>
+
+        <q-tab-panel name="movies">
+          <div class="text-h4 q-mb-md">Movies</div>
+          <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus obcaecati commodi minima assumenda consectetur culpa fuga nulla ullam. In, libero.</p>
+          <textarea>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus obcaecati commodi minima assumenda consectetur culpa fuga nulla ullam. In, libero.</textarea>
+          <input v-model="text" />
+          <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus obcaecati commodi minima assumenda consectetur culpa fuga nulla ullam. In, libero.</p>
+          <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus obcaecati commodi minima assumenda consectetur culpa fuga nulla ullam. In, libero.</p>
+        </q-tab-panel>
+      </q-tab-panels>
     </div>
   </div>
 </template>
@@ -138,7 +174,10 @@ export default {
       infoTest: null,
       infoTestCapture: null,
       swipeTestStopPropagation: true,
-      disable: false
+      disable: false,
+
+      tab: 'mails',
+      text: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus obcaecati commodi minima assumenda consectetur culpa fuga nulla ullam. In, libero.'
     }
   },
 

diff --git a/ui/src/directives/TouchSwipe.js b/ui/src/directives/TouchSwipe.js
@@ -139,6 +139,13 @@ export default {
             return
           }
         }
+        // is user trying to select text?
+        // if so, then something should be reported here
+        // (previous selection, if any, was discarded when swipe started)
+        else if (window.getSelection().toString() !== '') {
+          ctx.end(evt)
+          return
+        }
         else if (absX < ctx.sensitivity[2] && absY < ctx.sensitivity[2]) {
           return
         }

diff --git a/ui/src/utils/private/touch.js b/ui/src/utils/private/touch.js
@@ -10,6 +10,13 @@ const modifiersAll = {
   all: true
 }
 
+// This is especially important (not the main reason, but important)
+// for TouchSwipe directive running on Firefox
+// because text selection on such elements cannot be determined
+// without additional work (on top of getSelection() API)
+// https://bugzilla.mozilla.org/show_bug.cgi?id=85686
+const avoidNodeNamesList = ['INPUT', 'TEXTAREA']
+
 export function getModifierDirections (mod) {
   const dir = {}
 
@@ -47,6 +54,6 @@ export function shouldStart (evt, ctx) {
     evt.target !== void 0 &&
     evt.target.draggable !== true &&
     typeof ctx.handler === 'function' &&
-    evt.target.nodeName.toUpperCase() !== 'INPUT' &&
+    avoidNodeNamesList.includes(evt.target.nodeName.toUpperCase()) === false &&
     (evt.qClonedBy === void 0 || evt.qClonedBy.indexOf(ctx.uid) === -1)
 }