fix(QKnob): disable dragging on descendant images (fix #17812)

docs/src/pages/how-to-contribute/contribution-guide.md

@@ -251,7 +251,7 @@ An article [Look at the source code](https://medium.com/quasar-framework/wip-loo
 
 #### Development Setup
 
-You will need [Node.js](http://nodejs.org) version **v16+** along [pnpm](https://pnpm.io/). Read `package.json` and take notice of the scripts you can use.
+You will need [Node.js](http://nodejs.org) version **v18+** along [pnpm](https://pnpm.io/). Read `package.json` and take notice of the scripts you can use.
 
 After cloning the repo, run:
 

ui/playground/src/pages/form/knob.vue

@@ -152,6 +152,32 @@
         <q-icon name="volume_up" /> {{ model }}
       </q-knob>
 
+      <p class="caption">
+        Dragging is automatically disabled on descendant image(s)
+      </p>
+      <q-knob
+        v-model="model"
+        show-value
+        font-size="10px"
+        class="q-ma-md"
+        size="80px"
+        :max="max"
+        :min="min"
+        :thickness="0.25"
+        color="primary"
+        track-color="grey-3"
+      >
+        <q-avatar v-if="imagesIndex === 0" size="60px">
+          <img :src="images[imagesIndex]">
+        </q-avatar>
+
+        <div v-else>
+          <q-avatar size="60px">
+            <img :src="images[imagesIndex]">
+          </q-avatar>
+        </div>
+      </q-knob>
+
       <p class="caption">
         Inside Field
       </p>
@@ -182,6 +208,9 @@
 export default {
   data () {
     return {
+      imagesIndex: 0,
+      imageIntervalHandle: null,
+      images: [ 'https://cdn.quasar.dev/img/custom-svg-icons/components.svg', 'https://cdn.quasar.dev/logo-v2/svg/logo.svg' ],
       model: 30,
       modelZero: 20.03,
       modelSmall: 1.1,
@@ -190,6 +219,14 @@ export default {
       maxSmall: 2
     }
   },
+  mounted () {
+    this.imageIntervalHandle = setInterval(() => {
+      this.imagesIndex = (new Date().getSeconds() % 2 === 0) ? 1 : 0
+    }, 1000)
+  },
+  beforeUnmount () {
+    clearInterval(this.imageIntervalHandle)
+  },
   watch: {
     model (val, old) {
       console.log(`Changed from ${ JSON.stringify(old) } to ${ JSON.stringify(val) }`)

ui/src/components/knob/QKnob.js

@@ -1,4 +1,4 @@
-import { h, ref, computed, watch, getCurrentInstance } from 'vue'
+import { h, ref, computed, watch, getCurrentInstance, onMounted, onUpdated } from 'vue'
 
 import QCircularProgress from '../circular-progress/QCircularProgress.js'
 import TouchPan from '../../directives/touch-pan/TouchPan.js'
@@ -251,6 +251,16 @@ export default createComponent({
       return h('input', formAttrs.value)
     }
 
+    const knob = ref(null)
+
+    const setChildImagesNonDraggable = () =>
+      knob.value?.$el.querySelectorAll('img')
+        .forEach(img =>
+          img.setAttribute('draggable', 'false'))
+
+    onMounted(setChildImagesNonDraggable)
+    onUpdated(setChildImagesNonDraggable)
+
     return () => {
       const data = {
         class: classes.value,
@@ -262,6 +272,7 @@ export default createComponent({
         ...circularProps.value,
         value: model.value,
         instantFeedback: instantFeedback.value,
+        ref: knob,
         ...onEvents.value
       }