Checkbox Onchange In Inside Disabled Not Firing In Firefox With React

The following works in Firefox 80.0 and Chromium 84.0.4147.89. However, when I try and do something similar in React, it doesn't work in Firefox. The onChange event appears not to

Solution 1:

This behavior seems expected by the browser according to 2 lines earlier in that paragraph.

disabled If this Boolean attribute is set, all form controls that are descendants of the <fieldset>, are disabled, meaning they are not editable and won't be submitted along with the . They won't receive any browsing events, like mouse clicks or focus-related events. By default browsers display such controls grayed out. Note that form elements inside the element won't be disabled. - MDN

It seems that Firefox does exactly what it describes that it should do. A solution here would be to just place the <input> outside of the fieldset so that it won't be affected by the disabled property.

---

Edit

Your comment about listening for the events higher up in the DOM got me to thinking. How about if you bypass that by binding your own event listener with good ol' addEventListener, in combination with the useRef and useEffect hooks. Create a reference to the checkbox and to listen for the change event after the first render. Now the event is listening to the input itself. This "workaround" does seem to work in FF.

functionApp() {
  const [disabled, setDisabled] = React.useState(false);
  const toggleElement = React.useRef(null)
  const toggleDisabled = React.useCallback(() => {
    setDisabled(disabled => !disabled);
  }, []);
  
  React.useEffect(() => {
    toggleElement.current.addEventListener('change', toggleDisabled);
  }, []);

  return (
    <formaction="#"><fieldsetdisabled={disabled}><legend><label>
          toggle <inputref={toggleElement}type="checkbox" /></label></legend><input /></fieldset></form>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script><divid="root"></div>