CodeSandbox: https://codesandbox.io/s/charming-banach-tvdeu
Problem
I need to use multiple content-editable on my page. One below each other. They work just fine except when I onBlur the div by clicking outside the div.
Steps to reproduce the bug
First bug
- Focus on the first content-editable of either the first or second container
- Put the cursor on one-hand side (beginning or end)
- Click outside the content-editable on the opposite side of the cursor but still on the same line has the div ==> The content-editable doesn't blur. It first move the cursor to the very end side of the content and a second click is needed for the div to blur
Second bug
- Focus on the first content-editable of either the first or second container
- Put the cursor on one-hand side (begining or end)
- Click outside the content-editable but on the same line as the second content-editable of the same container ==> The second content-editable focus and a second click is needed for the div to blur
If the click happens on a different container it works fine.
I also tried to implement the fix from this topic https://stackoverflow.com/a/34445203 but the zero width space has a height I can't remove.
