React: Bug: Events from an <input> in the <legend> of a disabled <fieldset> get supressed

[MatthijsMud]

The closest related issue I could, is somewhat of the inverse of this one: #7711

React version: 16.12 (older versions as well)

Steps To Reproduce

1. Create a component
2. Add state indicating whether it is enabled or disabled (advised to start as enabled)
3. On render, let the component return a <fieldset> with: a <legend> containing an <input> (checkbox) element, and another form element (<select>, <input>, <textarea>).
4. Add the disabled attribute that follows the aforementioned state to the <fieldset>.
5. Make the onChange event of the <input> in the <fieldset> responsible for modifying the state of the component (enabled/disabled).
6. Run an app that uses the described component.
7. Disable the <fieldset> using the <input> in its <legend>.
8. (Try to) enable the <fieldset>.

Link to code example: Sandbox

import React from "react";

export default function App() {
  const [enabled, setEnabled] = React.useState(true);
  return <React.Fragment>
    <fieldset disabled={!enabled}>
      <legend>
        <input 
          type="checkbox"
          checked={enabled}
          onChange={(evt)=>{setEnabled(evt.target.checked);}}/>
      </legend>
      <textarea></textarea>
    </fieldset>
    <p>
      Disable the above fieldset by unchecking the checkbox. Checking the box once again does not re-enable the fieldset however.
    </p>
  </React.Fragment>;
}

The current behavior

Enabling the <fieldset> using the <input> in its <legend> changes the state of the <input> in unchecked fashion; it does not fire its onChange event and its value does thus no longer match the state of the component.

The expected behavior

Based on the W3C and WHATWG spec, the contents of the first <legend> of a <fieldset> should not be disabled when that fieldset is disabled.

One would expect that if an element does not appear disabled, its events will be triggered.

[ideffix]

I've checked that on:

• Edge 79 Beta
• Edge 18
• Chrome 79
• Opera 66
• Safari 13
• Firefox 72

It looks like described bug only appears on Firefox. In addition when you uncheck checkbox on Edge 18 it becomes disabled and you cannot change its state again.
@bvaughn If you think it is a ReactJS bug and it could be good first issue then I would be glad if I could take it :)

[bvaughn]

I don't know enough about this part of React DOM to say whether it's something that React DOM should smooth over or just a browser bug. (Have you tried to see if this behavior can be reproduced in Firefox without React?)

[ideffix]

Here I've created example that use pure Javascript and it works. As @MatthijsMud said - after second click on checkbox it doesn't execute onChange method and consequence of this is that enabled stays false so fieldset is always set to false after first checkbox click.

[bvaughn]

Seems like a bug then. Help yourself if you'd be interested in digging in, @ideffix :smile:

I've added the "good first issue (taken)" label so that others will know not to start work on the issue. If you change your mind about the issue, no worries! Just let me know so that I can remove the label and free it up for someone else to claim.

Cheers!

[ideffix]

I've done some digging and I ended up in EventListener.js and addEventBubbleListener function. It adds for document click event listener. However when HTML element(fieldset, input) is disabled it doesn't fire click event on Firefox. Please check this example both in Chrome and Firefox here. So it looks like Firefox bug/feature 😄

[bvaughn]

Nice follow up work, @ideffix!

Seems like maybe we should close this issue then and file one over on https://bugzilla.mozilla.org ?

Looks like this one is related, so maybe you could just add the info above to it?
https://bugzilla.mozilla.org/show_bug.cgi?id=1428838

[ideffix]

Yes sure - I think we can close this :)

[bvaughn]

Thanks for the investigation then! 🙇