vendredi 12 février 2021

Checkbox in legend in disabled fieldset not firing

I read this question and is almost the same problem but vanilla JS instead of React, and MS Edge (Chromium) instead of Firefox.

In a form I have a fieldset disabled by default. It has a legend and in that legend is a label with a checkbox and text in it; the checkbox has a data attribute 'toggle' valued the name of the fieldset to enable/disable...

<fieldset name="groupofinputs" disabled>
  <legend><label><input type="checkbox" data-toggle="groupofinputs" /><span>Use this group?</span></label></legend>
  <!-- ...some related inputs... -->
</fieldset>

I have as a listener of the 'input' event on the form itself a short script...

theForm.addEventListener('input', function(e) {
  let el = e.srcElement;
  if (el.dataset['toggle']) {
    theForm.elements[el.dataset['toggle']].disabled = !el.checked;
  }
});

...extremely simplified and omits error checking for this example, but I hope you get the point.

When the fieldset isn't disabled the checkbox's state is correctly handled and the listener fires. When the fieldset is disabled, however, even if it was previously enabled and the checkbox unchecking is what disables it, clicking on the checkbox with the mouse doesn't fire oninput nor onchange nor even onclick. The checkbox's state can still be changed in the console, and tabbing to the checkbox and pressing space will correctly fire input/change/click/etc events. It seems only clicking directly with the mouse doesn't work.

This seems to only happen in Edge Dev v90, works in Edge Stable v88 as per spec (fields in a disabled fieldset are disabled except if they're in its legend), but because I only have Edge Stable and Edge Dev on this computer I'm not sure if it happens on other v90 Chromium-based browsers and Firefox or not so I don't know where to actually file a bug report.

I guess this is a combo of "does this happen to others here," "how do I work around this until it's fixed," and "who do I submit the bug report to, Chromium or Edge?"




Aucun commentaire:

Enregistrer un commentaire