Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Prevent input checkbox from toggling <details>

Tags:

I have an <input type="checkbox"> tag inside of a <summary> inside a <details>, which unfortunately toggles the <details> to open or close when it is checked or unchecked, not unlike this question concerning space toggling details, but unfortunately can't be fixed with the same method for me in my version of Firefox.

See below snippet:

$('input').change(function(e) {
  e.stopPropagation();
  e.preventDefault();
  return false;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<details>
  <summary>
    <input type="checkbox">
  </summary>
  <div>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse finibus bibendum lorem, vitae efficitur felis mattis vitae. Sed mattis tristique rutrum. Morbi a placerat purus, et pulvinar risus. Vivamus accumsan sapien et nisi vulputate blandit. Aenean nec consectetur nulla. Nunc efficitur tincidunt placerat. Vivamus blandit est lectus, ut fermentum velit vulputate ut. Morbi elementum sem massa, eleifend laoreet dui tristique quis. Nulla mi dolor, consectetur blandit fermentum quis, tempor id nisi. Phasellus vel lobortis enim, id blandit turpis. Nullam dapibus feugiat risus eu pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam enim justo, pharetra sit amet urna sed, ultricies tempor nibh. 
  </div>
</details>

How do I prevent the <details> getting opened/closed by checking or unchecking the checkbox? (Other than the obvious answer of moving the <input> tag outside the <summary>. I am curious as to why this happens)

Edit

As mentioned by @Terry and then confirmed by me, this issue does not affect either Safari or Chrome, and even Firefox on Windows seems to act differently (it just ignores clicks on the checkbox entirely). Confirmed affects Firefox 66.0.2-3 on OS X Mojave 10.14.4.

Also if you capture the click event on the <summary> and return false; the checkbox still toggles the <details>, even though clicking elsewhere in the <summary> doesn't.

Edit 2

This was a Firefox bug and has been fixed in version 67.