Unexpected call of `onClick$` event on `button` element when `disabled={true}` [🐞]

[MiguelValdez-mv]

Which component is affected?

Qwik Runtime

Describe the bug

Starting from the following example:

export const CustomText = component$(() => (
   <span>
     <Slot />
   <span>
))

export default component$(() => (
   <>
     <button disabled onClick$={() => console.log("Test 1")}>
       Test 1
     </button>

     <button disabled onClick$={() => console.log("Test 2")}>
       <CustomText> Test 2 <CustomText>
     </button>
   </>
))

You have that when pressing the Test 1 button the onClick$ event does not occur, because disabled={true}, which is fine. However, pressing the Test 2 button displays the Test 2 console because that button's onClick$ event is called despite disabled={true} which should not happen.

Reproduction

https://stackblitz.com/edit/qwik-starter-e5zbny?file=src/root.tsx

Steps to reproduce

Execute npm run start

System Info

System:
    OS: Linux 5.11 elementary OS 6.1 Jólnir
    CPU: (12) x64 AMD Ryzen 5 5500U with Radeon Graphics
    Memory: 2.81 GB / 7.12 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 16.18.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/bin/yarn
    npm: 8.19.2 - /usr/local/bin/npm
  Browsers:
    Chrome: 107.0.5304.87
    Chromium: 107.0.5304.110

Additional Information

No response

[bolt-new-by-stackblitz[bot]]

Start a new pull request in StackBlitz Codeflow.

• qwik-starter-e5zbny (Open reproduction)

[nnelgxorz]

Just tried to reproduce this on the playground and it seems to work correctly. This may already be fixed in latest?

Playground example

[MiguelValdez-mv]

@nnelgxorz I just checked and still the error is still there in the latest version.

Here is a 20 second video showing the error:

https://www.loom.com/share/0589e14c271a4c22bee0733051684ab6

[deadenddeveloper]

Hi everyone,

just accidentally faced the same problem. Clicking on subnode of disabled button is not prevented. Found one fast crutch-solution, maybe it helps someone:

const btnHandler = $((event: MouseEvent) => {
    if (!(event.target as Element)?.closest("button")?.disabled) {
      // do something
    }
  });

[hamatoyogi]

this works as expected in v1.3.5.