Firefox wrongly trims trailing white space when editing

206 Views Asked by At

OS: Linux Mint 18.3, Firefox 72.

I've explored this phenomenon and I find it exists only in FF, not in Chrome (for example).

This problem applies, in general, to elements (perhaps DIV or TD) when their global attribute contentEditable has been set to true.

You can see the problem for yourself if you go here, get that HTML + JS and run it in your browsers.

The specific problem, when you load that file, can be seen if you put the cursor after "ipsum" and then press Ctrl-Backspace, to delete the word "ipsum". The result seems OK: when you see the cursor blinking after that, it appears that there is a trailing space after "Lorem". But when I then type some letter after that it gets stuck to "Lorem"... e.g. I type "m" and I see "Loremm".

This is not how it works with that same HTML file in Chrome: there, when I type "m", I see "Lorem m".

Even more strangely, when I type more words, in Firefox, after "Lorem ipsum" ... and then use Ctrl-Backspace and start typing, the problem does not occur: trailing white space is preserved properly.

There is another thing I've observed in FF: if, instead of going Ctrl-Backspace, I repeatedly go Backspace, i.e. letter-by-letter, until I've deleted "ipsum", leaving the trailing space. And if I then start typing ... trailing white space is preserved.

I have gone to the extent of writing a MutationObserver to see what's happening here and whether there's a possible workaround. The problem is that the FF browser in fact does this trimming before the MutationObserver fires any event.

There is a possible workaround which I'm working on, which is to trap the key event, and if it is "Ctrl + Backspace" to do event.preventDefault(). This does indeed stop the word-deletion occurring. I'd then have to implement a substitute solution, involving perhaps deleting letter-by-letter until I find white space.

This looks like a bug to me.

Here's a possible clue to what this might be about: when I first trap this event (i.e. on Ctrl-Backspace) and examine the event.target, I find that the innerHTML is correct, i.e. has a trailing space, but that the innerText is incorrect, i.e. the trailing space has been trimmed. I have done a bit of reading about this, and it appears that innerText is, so they say, primarily concerned with "how some text is presented on the page".

0

There are 0 best solutions below