Checkbox not working in contentEditable div [duplicate]

This question already has an answer here:

• Using form elements - checkboxes - inside contenteditable div 1 answer

In firefox 58.0b15 this checkbox doesn't work:

<div contenteditable="true">
  <input type="checkbox">
</div>

Any workarounds to make it clickable without prompting the user to turn contenteditable off?

<p>In case checkboxes don't work:</p>
<button onclick="try{document.querySelector('[contenteditable=true]').setAttribute('contenteditable', 'false');}catch(e){}">Click here</button>,
use the checkboxes, then
<button onclick="try{document.querySelector('[contenteditable=false]').setAttribute('contenteditable', 'true');}catch(e){}">Click here</button>
to resume editing.