[SOLVED] Chrome skips over empty paragraphs of contenteditable parent when moving cursor with arrow keys

Chrome skips over empty paragraphs of contenteditable parent when moving cursor with arrow keys

I am building a text editor. I have a parent element set to contenteditable that contains paragraph elements. Because of my specific use case I have to manually add new paragraphs to the DOM. So on any inputEvent I calculate what element needs to be changed or added to the DOM. So I prevent the default behavior with event.preventDefault().

However, when I use Chrome and move the text-cursor around with my arrow keys, the browser skips over any empty paragraphs. It simply jumps from one non-empty paragraph to the next non-empty paragraph.

Any ideas why? And how to make Chrome transverse to all paragraphs (empty and non-empty)?

Solution

When writing this question I discovered that I needed to place a <br> in the empty paragraphs. This solved the problem for me.

This problem does not occur when you have the browser automatically add new paragraphs, because the browser always adds a <br> to any new empty paragraphs.