feat(QBtn): easily allow preventing evt (@keydown.enter.space.prevent…

… @mousedown.prevent @touchstart.prevent) - backport from Qv2 quasarframework#12385
pdanpdan · Feb 15, 2022 · d5f6ff7 · d5f6ff7
1 parent 78938b9
commit d5f6ff7
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 21 deletions.
diff --git a/ui/dev/src/pages/components/button-prevent.vue b/ui/dev/src/pages/components/button-prevent.vue
@@ -0,0 +1,32 @@
+<template>
+  <div class="q-layout-padding">
+    <div class="q-pa-md">
+      <div class="q-gutter-md" style="max-width: 300px">
+        <q-input v-model="text" label="Standard" autofocus />
+
+        <button @mousedown.prevent @touchstart.prevent @keydown.enter.space.prevent @click="log('button prevented', $event)">
+          Click me - preventing mousedown works here
+        </button>
+
+        <q-btn label="Click me - preventing!" @keydown.enter.space.prevent @mousedown.prevent @touchstart.prevent @click="log('q-btn prevented', $event)" />
+        <q-btn label="Click me - not preventing" @click="log('q-btn', $event)" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      text: ''
+    }
+  },
+
+  methods: {
+    log (src, evt) {
+      console.log(src, evt)
+    }
+  }
+}
+</script>
diff --git a/ui/src/components/btn/QBtn.js b/ui/src/components/btn/QBtn.js
@@ -155,46 +155,54 @@ export default Vue.extend({
     },
 
     __onKeydown (e) {
-      if (isKeyCode(e, [ 13, 32 ]) === true) {
-        stopAndPrevent(e)
+      this.$emit('keydown', e)
 
+      if (isKeyCode(e, [ 13, 32 ]) === true) {
         if (keyboardTarget !== this.$el) {
           keyboardTarget !== void 0 && this.__cleanup()
 
-          // focus external button if the focus helper was focused before
-          this.$el.focus()
+          if (e.defaultPrevented !== true) {
+            // focus external button if the focus helper was focused before
+            this.$el.focus()
 
-          keyboardTarget = this.$el
-          this.$el.classList.add('q-btn--active')
-          document.addEventListener('keyup', this.__onPressEnd, true)
-          this.$el.addEventListener('blur', this.__onPressEnd, passiveCapture)
+            keyboardTarget = this.$el
+            this.$el.classList.add('q-btn--active')
+            document.addEventListener('keyup', this.__onPressEnd, true)
+            this.$el.addEventListener('blur', this.__onPressEnd, passiveCapture)
+          }
         }
-      }
 
-      this.$emit('keydown', e)
+        stopAndPrevent(e)
+      }
     },
 
     __onTouchstart (e) {
+      this.$emit('touchstart', e)
+
       if (touchTarget !== this.$el) {
         touchTarget !== void 0 && this.__cleanup()
-        touchTarget = this.$el
-        const target = this.touchTargetEl = e.target
-        target.addEventListener('touchcancel', this.__onPressEnd, passiveCapture)
-        target.addEventListener('touchend', this.__onPressEnd, passiveCapture)
-      }
 
-      this.$emit('touchstart', e)
+        if (e.defaultPrevented !== true) {
+          touchTarget = this.$el
+          const target = this.touchTargetEl = e.target
+          target.addEventListener('touchcancel', this.__onPressEnd, passiveCapture)
+          target.addEventListener('touchend', this.__onPressEnd, passiveCapture)
+        }
+      }
     },
 
     __onMousedown (e) {
+      this.$emit('mousedown', e)
+
       if (mouseTarget !== this.$el) {
         mouseTarget !== void 0 && this.__cleanup()
-        mouseTarget = this.$el
-        this.$el.classList.add('q-btn--active')
-        document.addEventListener('mouseup', this.__onPressEnd, passiveCapture)
-      }
 
-      this.$emit('mousedown', e)
+        if (e.defaultPrevented !== true) {
+          mouseTarget = this.$el
+          this.$el.classList.add('q-btn--active')
+          document.addEventListener('mouseup', this.__onPressEnd, passiveCapture)
+        }
+      }
     },
 
     __onPressEnd (e) {