QKnob with image content in default slot can't be interacted with to update model value

[euphemism]

What happened?

mousing over a Knob component with an image in the default slot results in the browser's default image dragging behavior to override the QKnobs behavior:

from: https://quasar.dev/vue-components/knob#example--show-value

<q-knob
  show-value
  font-size="10px"
  class="q-ma-md"
  v-model="value"
  size="80px"
  :thickness="0.25"
  color="primary"
  track-color="grey-3"
>
  <q-avatar size="60px">
    <img src="https://cdn.quasar.dev/logo-v2/svg/logo.svg">
  </q-avatar>
</q-knob>

Screen.Recording.2025-02-07.at.8.43.16.AM.mov

Adding pointer-events: none to the slot's containing element resolves the problem:

Screen.Recording.2025-02-07.at.8.41.28.AM.mov

What did you expect to happen?

I expected to be able to click and drag on the knob, changing the value.

Reproduction URL

https://codepen.io/euphemism-the-encoder/full/zxOgpbV

How to reproduce?

1. Go to link
2. Click and drag on knob (Quasar logo image in center)
3. Observe browser-native image dragging behavior instead of model change

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Components (quasar)

Platforms/Browsers

Firefox, Safari, iOS, Chrome

[github-actions]

Hi @euphemism! 👋

It looks like you provided an invalid or unsupported reproduction URL.
Do not use any service other than Codepen, jsFiddle, StackBlitz, CodeSandbox, and GitHub.
Make sure the URL you provided is correct and reachable. You can test it by visiting it in a private tab, another device, etc.
Please edit your original post above and provide a valid reproduction URL as explained.

Without a proper reproduction, your issue will have to get closed.

Thank you for your collaboration. 👏

[yusufkandemir]

Since it's in the slot, the user is in total control. So, the user can do:

<q-knob
  ...
>
  <q-avatar size="60px">
    <img draggable="false" src="https://cdn.quasar.dev/logo-v2/svg/logo.svg">
  </q-avatar>
</q-knob>

or

<q-knob
  ...
>
  <q-avatar size="60px">
    <img class="no-pointer-events" src="https://cdn.quasar.dev/logo-v2/svg/logo.svg">
  </q-avatar>
</q-knob>

Using images is not a really frequent use case, and the solution is not anywhere near being hard, solving this without causing any potential problems to other use cases or preserving the performance is not guaranteed.

So, the proper solution for this would be to document this case in the docs, and possibly integrate it into the example you pointed out as well. For that reason, I'm afraid I will have to deny your PR. But, I'll keep this issue until it gets documented.