Search code examples
htmlcssfirefoxcontenteditable

Spans with display:none is not showing the space bars in firefox

We had a use case where some spans with display:none is added to our content editable div.

So when the user somehow lands on the span and tries to add content, the space bars are getting added inside the span, thereby not showing up in the UI. All other characters are working fine. The issue is only with the space.

This seems to be a Firefox only issue. Chrome is working fine.

Was able to reproduce the issue using this jsfiddle -> https://jsfiddle.net/senths/ehLp86zy/3/ (click b/w hello & world and try to add space)

Fiddle demo

Firefox Version Used: 91.8.0esr (64-bit)

Is this behaviour expected in Firefox?

Any lead is appreciated. Thanks in advance.

Solution

  • Confused by the other answer, to the best of my knowledge the solution here is the exact opposite. If you add contenteditable="false" to the span it will prevent spaces getting added to the hidden span.

    <div id="parent">
  <div contenteditable="true" id="editor2">
    hello<span style="display: none" id="dummy_bkm" contenteditable="false">&nbsp;</span>world
  </div>
</div>

    To understand what's happening try inserting a space in the below code (without the display: none and without the contenteditable="false"

    <div id="parent">
  <div contenteditable="true" id="editor2">
    hello<span style="background: green;" id="dummy_bkm" >&nbsp;</span>world
  </div>
</div>