Set text cursor to the end of the input on focus?

this.editor.focus() sets the cursor at the beginning of the input, what is the preffered way of setting it at the end?

(Sorry if this has been answered before, searched the issues for “focus” and couldn’t seem to find any related issues.)

I’m on Mac/Chrome 57.0.2987.133.

[haikyuu]

If @brijeshb42 solution doesn’t work, take a look at editor.focus() code. I had to change @brijeshb42 solution to use forceSelection instead. Full code here:

import { EditorState, SelectionState } from "draft-js";

/**
 * Returns a new EditorState where the Selection is at the end.
 *
 * This ensures to mimic the textarea behaviour where the Selection is placed at
 * the end. This is needed when blocks (like stickers or other media) are added
 * without the editor having had focus yet. It still works to place the
 * Selection at a specific location by clicking on the text.
 */
const moveSelectionToEnd = editorState => {
  const content = editorState.getCurrentContent();
  const blockMap = content.getBlockMap();

  const key = blockMap.last().getKey();
  const length = blockMap.last().getLength();

  // On Chrome and Safari, calling focus on contenteditable focuses the
  // cursor at the first character. This is something you don't expect when
  // you're clicking on an input element but not directly on a character.
  // Put the cursor back where it was before the blur.
  const selection = new SelectionState({
    anchorKey: key,
    anchorOffset: length,
    focusKey: key,
    focusOffset: length,
  });
  return EditorState.forceSelection(editorState, selection);
};

export default moveSelectionToEnd;

[ladifire]

Draftjs has moveSelectionToEnd(e: EditorState) function. So to move focus to end, you just need write this small piece of code:

export function moveFocusToEnd(editorState: EditorState) {
    editorState = EditorState.moveSelectionToEnd(editorState);
    return EditorState.forceSelection(editorState, editorState.getSelection());
}