title: Why triggering click on contenteditable doesn't activate element and set cursor
body: <p>I want contenteditable to become active with cursor on the simulated click event, however this doesn't happen - the element doesn't get activated. Why? I need to put a cursor at exactly the same position as the user clicked, that's why I'm using <code>click</code> event since it contains coordinates.</p>
  
  <p>I've created <a href="https://jsfiddle.net/aL5Lyw56/" rel="nofollow">this</a> simple setup to demonstrate the problem (click inside the contenteditable div):</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div contenteditable="true" style="width: 100px; height: 100px; border: 1px solid black;"&gt;some text&lt;/div&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>$(function() {
      var editable = $('[contenteditable]');
      var event, initial = true;
      editable.on('click', function(e) {
          event = e;
          console.log('writing event', event);
  
          if (initial) {
              initial = false;
              editable.blur();
              setTimeout(function() {
                  console.log('trigger click');
                  editable.trigger(e);
              }, 3000);
          }
      });
  });
  </code></pre>