How to prevent Mac Safari to select text on right click in contenteditable area

Question

I am working on an editor and is facing an issue with Mac Safari. Whenever user right click on a word, it selects the complete word alongwith opening menu

Problem can be reproduced by simple html:

<div contenteditable>
  <p>
  This is sample text
  </p>
</div>

It can be replicated at here also : https://plnkr.co/edit/VfxC5JcsI0VzWAQLUG1u?p=preview
I added preventDeafult also on right click but of no use.

Any js/jquery solution is welcome. It will be great if we can find a CSS solution

Answer 1

The user-select:none option does not work, it will not select text with left mouse button but when accessing the contextmenu in safari it still selects the text you right clicked on.

What worked for me was to deselect the text with javascript.

document.getSelection().removeAllRanges();

Place above code into the $('div').contextmenu method for it to work.