Can't change cursor position by clicking on div contenteditable in FF
I have been doing web-ui development for a while and now it has gotten quite complicated. At a certain place I am using <div contenteditable="true">
to edit text and there is a bug in FireFox that I cannot track:
When there is some text in the div and I click with the mouse to change the cursor position, it doesn't work. The cursor is always at the end of the text. It works great in other browsers and you can change cursor in FF with arrow keys.
I tested a simple html page with one item <div contenteditable="true">
in it in FireFox and it works fine but doesn't work on my system. Obviously there is something blocking it.
What could be the problem?
Thank!
source to share
I had the same problem and finally I found that the problem in my case was CSS. I have had:
-moz-user-select: none;
in the parent of my contenteditable which caused the problems.
It worked well after I applied:
-moz-user-select: element;
NOTE. Depending on what type of behavior you want, select a user select value ( https://developer.mozilla.org/en-US/docs/Web/CSS/user-select )
source to share
it didn't work for me because the drag is being done in the parent div. and it affects all input boxes, text boxes and divs with contenteditable.
I haven't found a solution for it yet, but there is already a Bug Ticket for Firefox with the correct hint what is dragging the issue.
Here is the link to the bug: https://bugzilla.mozilla.org/show_bug.cgi?id=419808#c4
Here's how to fix the problem: Prevent drag event to prevent input elements in Firefox using HTML5 drag and drop
source to share