Do you want to request a feature or report a bug?
Bug
What is the current behavior?
After resetting the EditorState, typing a single characters causes the caret to jump back to the start.
Here is a simple repo example.
class ChatFooter extends Component {
constructor (props) {
super(props);
this.state = {editorState: EditorState.createEmpty()};
this.onChange = (editorState) => this.setState({editorState});
this.focusEditor = this.focusEditor.bind(this);
this.handleKeyCommand = this.handleKeyCommand.bind(this);
}
componentDidUpdate () {
console.log('componentDidUpdate: ', window.getSelection());
}
focusEditor () {
this.editor.focus();
}
editorKeyBindings (event) {
if (event.keyCode === 13 && !event.shiftKey) {
return 'send-message';
}
return getDefaultKeyBinding(event);
}
handleKeyCommand (command, editorState) {
console.log(command);
if (command === 'send-message') {
this.setState({editorState: EditorState.createEmpty()});
return 'handled';
}
return 'not-handled';
}
render () {
const { editorState } = this.state;
let inputWrapperCls = 'chat-input-wrapper';
console.log('render: ', editorState.getSelection().toJS());
return(
<div className='chat-footer'>
<div className={inputWrapperCls}>
<Editor
editorState={editorState}
onChange={this.onChange}
handleKeyCommand={this.handleKeyCommand}
keyBindingFn={this.editorKeyBindings}
placeholder='Type a message'
/>
</div>
</div>
);
}
}
Steps to reproduce:
Notice how the caret is at the start. If you watch the logging of the selection you will see the window selection still has an offset of 0 while the logged offset before the render has the correct offset of 1.
What is the expected behavior?
The window and logged caret offset should be the same.
Which versions of Draft.js, and which browser / OS are affected by this issue? Did this work in previous versions of Draft.js?
Draft-js version: 0.10.5
Chrome version: 59.0.3071.115
OS: Ubuntu 16.04.2 LTS
The solution on this ticket https://github.com/facebook/draft-js/issues/410 fixes my issue.
This guy did the trick
this.setState({editorState: EditorState.moveFocusToEnd(EditorState.createEmpty())});
@topched it doesnt fix it, because when you clicking in the middle of a paragraph for example, and want to change a word, it push you out to the end of the text.
It is not possible to have a paragraph in the editor state if you reset it to nothing and type a single character.
@topched What to do if I want to set same Caret position as before after updating editor state? Appreciate your response in advance.
Most helpful comment
@topched it doesnt fix it, because when you clicking in the middle of a paragraph for example, and want to change a word, it push you out to the end of the text.