button click not disabled on within fieldset

[asmadsen]

trafficstars

Describe the bug

click not disabled when wrapping button in fieldset

This is the same issue as #7711 in react

<fieldset disabled>
  <button onClick={() => alert('clicked')}>
    click me here and <span style={{color: 'red'}}>here</span>
  </button>
</fieldset>

Your Example Website or App

https://stackblitz.com/edit/solidjs-templates-jeskz7?file=src/App.tsx

Steps to Reproduce the Bug or Issue

Go to the stackblitz Try to click the button both on the gray and red text That'll show that clicking directly on the button doesn't trigger the onClick, while clicking on the child element will.

Expected behavior

Clicking on anything within the button should not trigger the onClick handler on the button if the fieldset is set to disabled.

Screenshots or Videos

No response

Platform

• OS: [e.g. macOS, Windows, Linux]
• Browser: [e.g. Chrome, Safari, Firefox]
• Version: [e.g. 91.1]

Additional context

https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#concept-fe-disabled

[ryansolid]

I see. Looks like something a bit fiddly to fix. Interested to see if any framework with event delegation has solved this and how they went about doing so.

[asmadsen]

I came across this working on making a port of headlessui. And there they have temporarily solved it by going up the DOM tree looking for a fieldset.

https://github.com/tailwindlabs/headlessui/blob/main/packages/@headlessui-react/src/utils/bugs.ts

[LiQuidProQuo]

you can bind native events directly to the element, use on:click. https://playground.solidjs.com/anonymous/ff4fa624-92c4-4b4c-a73a-3513cd455bb8

<button on:click={() => alert("clicked")}>
        click me here and <span style={{ color: "green" }}>good</span>
</button>

🚩 the headlessui fix posted, does not cover nested fieldsets case, see playground

[davidivkovic]

This issue seems to be fixed? I could not reproduce it anymore.