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

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 ->

Firefox Version Used: 91.8.0esr (64-bit)

Is this behaviour expected in Firefox?

Any lead is appreciated. Thanks in advance.

CodePudding user response：

If you set contenteditable="true" inside the span tag this will work how (I believe) you intent it to in Firefox.

There is a know reported bug in Firefox that is 4 years old. Information about that is at: https://bugzilla.mozilla.org/show_bug.cgi?id=1489481

CodePudding user response：

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>