Draft-js: Unable to set focus to end of textarea

[brookslyrette]

I'm prepopulating draft-js with content but when I do focus is always at the start:

I'm setting the value in my constructor:

constructor(props) {
        super(props);
        let editorState = EditorState.createEmpty();
        if (this.props.caption.content.trim() !== '') {
            const captionAsHtml = convertToHtml(this.props.caption);
            const processedHTML = DraftPasteProcessor.processHTML(captionAsHtml);
            const contentState = ContentState.createFromBlockArray(processedHTML);

            editorState = EditorState.push(editorState, contentState, 'inital-load');
            editorState = EditorState.forceSelection(editorState, contentState.getSelectionAfter());
        }

        this.state = {
            editorState: editorState
        };
    }

Selection after seems to be ignored. I've also tried forcing this in componentDidMount to no avail.

    componentDidMount() {
        this.refs.editor.focus();
        this.setState({
            editorState: EditorState.forceSelection(editorState, editorState.getCurrentContent().getSelectionAfter())
        });
    }

Am I misunderstanding the API or is this a missing feature?

[hellendag]

A couple notes:

• I suggest using EditorState.createWithContent to initialize, rather than using createEmpty and pushing. Unless you want the user to be able to undo back to an empty state.
• You can use https://github.com/facebook/draft-js/blob/master/src/model/immutable/EditorState.js#L318 to move the focus to the end of the editor. This is missing from the docs on draftjs.org, and should probably be added.

Note that ContentState.createFromBlockArray will actually set the focus to the start of the content: https://github.com/facebook/draft-js/blob/master/src/model/immutable/ContentState.js#L119

Hopefully this resolves things -- if not, let me know. :)

[brookslyrette]

Thanks @hellendag. Your suggestions worked perfectly.