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

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.

[bvaughn]

Seems like a bug then. Help yourself if you’d be interested in digging in, @ideffix 😄

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]

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.