Disabled inputs' click event is not fired in Firefox

Firefox does not have the same behavior than other browsers when we speak about disabled elements. Here is how this can be result can be equalized.

Unlike other browsers (like chrome), Firefox doesn't trigger click event or bubble it to parent elements, if a HTML tag is disabled.

This behavior is intended, and documented in bugzilla:

218093 - disabled child element doesn't produce mouseout/mouseover pair.

So this code won't do anything in Firefox, but it will in Chrome:

<input disabled placeholder="Click here" type="text" />

<script>
  document.body.addEventListener('click', () => {
    alert('Body clicked!');
  });
</script>

Workarounds

  1. Consider using readonly instead of disabled to some input elements, which may make sense depending on the use case.
  2. With some extra HTML and CSS, surround the input with a div and the ::after pseudoelement so it propagates clicks to parent nodes.
<div class="input-wrapper input-wrapper--disabled">
  <input disabled placeholder="Click here" type="text" />
  <div>
    <style>
      .input-wrapper {
        position: relative;
      }

      .input-wrapper--disabled::after {
        content: '';
        position: absolute;
        inset: 0;
      }
    </style>

    <script>
      document.body.addEventListener('click', () => {
        alert('Body clicked!');
      });
    </script>
  </div>
</div>