QBtn repeat, removeChild guard, show|hidePromise catch (quasarframework#2213)

* QBtn repeat, removeChild guard, show|hidePromise catch

- QBtn: fix multiple clicks and not working repeat
- Guard removeChild
- QDialog, QActionSheet: remove duplicate cancel emit (it's done in dismiss)
- Add catch for showPromise and hidePromise in model-toggle on cancel
- QModal: remove from DOM when closed

* Update scroll.js

Author: pdanpdan

dev/components/components/button.vue

@@ -7,7 +7,7 @@
           <q-btn :key="`n_1_1_${ n }`" :type="tag" :size="n" dense icon="android" color="primary" />
           <q-btn :key="`n_1_2_${ n }`" :type="tag" :size="n" icon="android" color="primary" />
           <q-btn :key="`n_1_3_${ n }`" :type="tag" :size="n" label="Test" color="primary" />
-          <q-btn :key="`n_1_4_${ n }`" :type="tag" :size="n" icon="android" color="primary" label="Test"/>
+          <q-btn :key="`n_1_4_${ n }`" :type="tag" :size="n" icon="android" color="primary" label="Test" />
           <q-btn :key="`n_1_5_${ n }`" :type="tag" :size="n" round icon="android" color="primary" />
           <q-btn :key="`n_1_6_${ n }`" :type="tag" :size="n" round icon="android" color="primary" dense />
           <q-btn :key="`n_1_7_${ n }`" :type="tag" :size="n" label="Test" color="primary" />
@@ -17,7 +17,7 @@
         <template v-for="n in ['xs', 'sm', 'md', 'lg', 'xl']">
           <q-btn :key="`n_2_1_${ n }`" :type="tag" :size="n" dense label="Test" color="primary" />
           <q-btn :key="`n_2_2_${ n }`" :type="tag" :size="n" dense icon="android" color="primary" />
-          <q-btn :key="`n_2_3_${ n }`" :type="tag" :size="n" dense icon="android" color="primary" label="Test"/>
+          <q-btn :key="`n_2_3_${ n }`" :type="tag" :size="n" dense icon="android" color="primary" label="Test" />
           <q-btn :key="`n_2_4_${ n }`" :type="tag" :size="n" dense round icon="android" color="primary" />
           <span :key="`n_2_5_${ n }`">{{ n }}</span>
           <br :key="`n_2_6_${ n }`"><br :key="`n_2_7_${ n }`">
@@ -85,8 +85,8 @@
       </div>
 
       <br><br>
-      <q-btn :type="tag" color="amber" text-color="black" icon="map" label="Some label" />
-      <q-btn :type="tag" text-color="amber" icon="map" label="Some label" />
+      <q-btn :type="tag" color="amber" text-color="black" icon="map" label="Some label" @click="onClick" />
+      <q-btn :type="tag" text-color="amber" icon="map" label="Some label" @click="onClick" />
 
       <br><br>
       <div class="caption">Keep holding click</div>

dev/components/components/tooltip.vue

@@ -40,6 +40,11 @@
             <strong>Tooltip</strong> on <em>bottom</em> (<q-icon name="keyboard_arrow_down" />)
           </q-tooltip>
         </q-btn>
+        <q-btn color="orange" label="With loading" :loading="loading" @click="setLoading">
+          <q-tooltip anchor="bottom middle" self="top middle" :offset="[10, 10]">
+            <strong>Tooltip</strong> on <em>bottom</em> (<q-icon name="keyboard_arrow_down" />)
+          </q-tooltip>
+        </q-btn>
       </div>
 
       <q-card style="margin-top: 75px">
@@ -104,6 +109,7 @@ export default {
   data () {
     return {
       toggle: false,
+      loading: false,
       anchorOrigin: {vertical: 'bottom', horizontal: 'middle'},
       selfOrigin: {vertical: 'top', horizontal: 'middle'}
     }
@@ -115,6 +121,14 @@ export default {
     self () {
       return `${this.selfOrigin.vertical} ${this.selfOrigin.horizontal}`
     }
+  },
+  methods: {
+    setLoading () {
+      this.loading = true
+      setTimeout(() => {
+        this.loading = false
+      }, 1000)
+    }
   }
 }
 </script>

dev/components/global/action-sheet.vue

@@ -33,6 +33,7 @@
       @show="onShow"
       @hide="onHide"
       @cancel="onCancel"
+      @escape-key="onEscape"
       @ok="onOk"
       title="Action Sheet"
       :actions="[
@@ -110,6 +111,9 @@ export default {
     onCancel (data) {
       console.log('onCancel', data)
     },
+    onEscape (data) {
+      console.log('onEscape', data)
+    },
     onHide (data) {
       console.log('onHide', data)
     },

dev/components/global/dialog.vue

@@ -6,6 +6,7 @@
         ref="dialog"
         stack-buttons
         @cancel="onCancel"
+        @escape-key="onEscape"
         @ok="onOk"
         @show="onShow"
         @hide="onHide"
@@ -69,16 +70,19 @@ export default {
       this.showDialog = !this.showDialog
     },
     onOk () {
-      console.log('ok')
+      console.log('onOk')
     },
     onCancel () {
-      console.log('cancel')
+      console.log('onCancel')
+    },
+    onEscape () {
+      console.log('onEscape')
     },
     onShow () {
-      console.log('show')
+      console.log('onShow')
     },
     onHide () {
-      console.log('hide')
+      console.log('onHide')
     },
     choose (okFn, hero) {
       if (this.name.length === 0) {

src/components/action-sheet/QActionSheet.js

@@ -92,7 +92,6 @@ export default {
         },
         'escape-key': () => {
           this.$emit('escape-key')
-          this.$emit('cancel')
         }
       }
     }, child)

src/components/btn/QBtn.js

@@ -85,13 +85,11 @@ export default {
       clearTimeout(this.timer)
     },
     __onKeyDown (e, repeat) {
-      if (this.type || this.isDisabled || e.keyCode !== 13) {
+      if (this.isDisabled || e.keyCode !== 13) {
         return
       }
       this.active = true
-      if (repeat) {
-        this.__startRepeat(e)
-      }
+      repeat ? this.__startRepeat(e) : stopAndPrevent(e)
     },
     __onKeyUp (e, repeat) {
       if (!this.active) {

src/components/dialog/QDialog.js

@@ -116,7 +116,6 @@ export default {
 
           node = this.$refs.modal.$el.getElementsByClassName('q-btn')
           if (node.length) {
-            console.log('found btn')
             node[node.length - 1].focus()
           }
         },
@@ -128,7 +127,6 @@ export default {
         },
         'escape-key': () => {
           this.$emit('escape-key')
-          this.$emit('cancel')
         }
       }
     }, child)

src/components/modal/QModal.js

@@ -204,9 +204,7 @@ export default {
       EscapeKey.pop()
       this.__preventScroll(false)
       this.__register(false)
-      if (!this.noRefocus) {
-        setTimeout(() => this.__refocusTarget && this.__refocusTarget.focus(), 300)
-      }
+      !this.noRefocus && this.__refocusTarget && this.__refocusTarget.focus()
     },
     __stopPropagation (e) {
       e.stopPropagation()
@@ -230,6 +228,10 @@ export default {
         }
         document.body.classList[state.action]('q-responsive-modal')
       }
+    },
+    __removeChild () {
+      const parentNode = this.$el.parentNode
+      parentNode && parentNode.removeChild(this.$el)
     }
   },
   mounted () {
@@ -238,9 +240,7 @@ export default {
     }
   },
   beforeDestroy () {
-    if (this.$el.parentNode) {
-      this.$el.parentNode.removeChild(this.$el)
-    }
+    this.__removeChild()
   },
   render (h) {
     return h('transition', {
@@ -251,9 +251,11 @@ export default {
         },
         enterCancelled: () => {
           this.showPromise && this.showPromiseReject()
+          this.__removeChild()
         },
         afterLeave: () => {
           this.hidePromise && this.hidePromiseResolve()
+          this.__removeChild()
         },
         leaveCancelled: () => {
           this.hidePromise && this.hidePromiseReject()

src/components/popover/QPopover.js

@@ -138,7 +138,8 @@ export default {
       window.removeEventListener('resize', this.__updatePosition, listenOpts.passive)
       EscapeKey.pop()
 
-      document.body.removeChild(this.$el)
+      const parentNode = this.$el.parentNode
+      parentNode && parentNode.removeChild(this.$el)
       this.hidePromise && this.hidePromiseResolve()
       if (!this.noRefocus && this.__refocusTarget) {
         this.__refocusTarget.focus()

src/components/tooltip/QTooltip.js

@@ -68,7 +68,9 @@ export default {
 
       this.scrollTarget.removeEventListener('scroll', this.hide, listenOpts.passive)
       window.removeEventListener('resize', this.__debouncedUpdatePosition, listenOpts.passive)
-      document.body.removeChild(this.$el)
+
+      const parentNode = this.$el.parentNode
+      parentNode && parentNode.removeChild(this.$el)
       if (this.$q.platform.is.mobile) {
         document.body.removeEventListener('click', this.hide, true)
       }