bmcmahen / react-wysiwyg

retain some control over contenteditable input
169 stars 37 forks source link

Fix issue with ghost cursor. #27

Closed cgc closed 9 years ago

cgc commented 9 years ago

Have been experiencing issues with flickering cursors and stolen focus when programmatically setting the HTML of this component (the programmatically generated HTML is updated when application state is modified, but needs to still be modified through the interface).

Here's an example of an issue that is resolved by this change (the selection sort of "wanders" because selection-range will look outside of the passed argument for a match): issue

the gif above was taken with this diff applied:

diff --git a/example/example.js b/example/example.js
index 230f89d..4456543 100644
--- a/example/example.js
+++ b/example/example.js
@@ -10,8 +10,14 @@ function escapeHTML(html) {
 var Example = React.createClass({

   getInitialState: function(){
+    setInterval(function() {
+      this.setState({
+        html: this.state.html + '...'
+      });
+    }.bind(this), 500);
+
     var editing = false
-    var defaultValue = ''
+    var defaultValue = 'test'

     return {
       html: defaultValue,
bmcmahen commented 9 years ago

Good catch. I wonder if this fixes #25 too. Thanks!