Multiple contentEditable, unable to move carret to end of span with arrow keys

Question

I have multiple spans with content editable property set to true, like this:

<span contentEditable='true'> value</span><span contentEditable='true'> value</span><span contentEditable='true'> value</span>

https://jsfiddle.net/du7g39cz/

Problem is that when I am using arrow keys to navigate around span element, I can not reach end of individual span as blur event gets called when caret reaches last symbol.

I can reproduce this behavior on all browsers apart MS Edge.

I must note that I wouldn't like to keep only one content editable parent, as this would easily let user to delete whole paragraph, intention is to let user edit only one word at a time.

Answer 1

It seems like a browser bug. It is only happening in Firefox for me, however, adding any amount of padding to the spans seems to correct the issue:

span[contentEditable] { padding: 1px; }

https://jsfiddle.net/jimbo2150/du7g39cz/2/