Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

change event and re-render on state change #76

Open
dougnorton opened this issue Oct 10, 2019 · 3 comments
Open

change event and re-render on state change #76

dougnorton opened this issue Oct 10, 2019 · 3 comments

Comments

@dougnorton
Copy link

Periodically I update some state which causes the CKEditor to re-render. If I'm typing into the editor at the same time the state update happens, I loose text and the cursor jumps to the beginning of the text.

I have a change to the example.js (below) that causes the issue. Just run the example and start typing in the CKEditor.

Is this an issue or is it just the way I have it coded?

const React = require('react');
const ReactDOM = require('react-dom');
import CKEditor from "../src";

class Example extends React.Component {
  constructor(props){
    super(props);

    //State initialization
    this.state = {
	  content: "Hello World",
	  periodic: 'b'
    };
	this.setContent = this.setContent.bind(this)
	this.onChange = this.onChange.bind(this);
	
	setInterval(() => this.cycleUpdate(), 1000);
  }

  cycleUpdate() {
	this.setState({
		periodic: this.state.periodic + 'a'
	});
  }

  //------ Test for race condition ------ //
  setContent(){
    console.log("Setting content");
    this.setState({
      content: "Hello World " + Math.random()
    })
  }

  onChange(evt){
	this.setState({
		content: evt.editor.getData()
	});
    console.log("onChange fired with event info: ",evt, "and data: ",evt.editor.getData());
  }

  onBlur(evt){
    console.log("onBlur fired with event info: ",evt);
  }

  afterPaste(evt){
    console.log("afterPaste fired with event info: ",evt);
  }

  render() {
    return (
      <div>
        <button onClick={() => this.setContent()} children='Set content' />
        <CKEditor
          content={this.state.content}
          events={{
            blur: this.onBlur,
            afterPaste: this.afterPaste,
            change: this.onChange
          }}
        />
      </div>
    );
  }
}

ReactDOM.render(
  <Example />,
  document.getElementById('example')
);
@pmonty
Copy link

pmonty commented Dec 18, 2019

Having a similar issue, if i type the character i entered disappears and it goes to the start of the editor. Any idea? If i use 1.0.5 instead of @latest and use the onChange event it works though.

@offaxis
Copy link

offaxis commented Apr 23, 2020

+1
I experienced this bug on receiving WebSocket MessageEvent !

@sagarguhe
Copy link

+1

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants