Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:8 (3 by maintainers)

github_iconTop GitHub Comments

haikyuucommented, Jun 22, 2018

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;

ladifirecommented, Oct 23, 2020

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());
Read more comments on GitHub >

github_iconTop Results From Across the Web

Use JavaScript to place cursor at end of text in text input element
For the cursor to be move to the end, the input has to have focus first, then when the value is changed it...
Read more >
Put cursor at the end of an input - HTML DOM
Put cursor at the end of an input. Assume that we have a text field representing the full name of an user. There...
Read more >
How to place cursor position at end of text in text input field ...
At first, we are going to create a text input box where some value will be given and a button to place the...
Read more >
Move cursor to the end of input [JavaScript] - Alvaro Trigo
You can move the cursor to the end of an input or a textarea by using `selectionStart` and `selectionEnd` properties of input elements...
Read more >
Move Cursor to End of Input - CSS-Tricks
Where el is a reference to an input or textarea. function moveCursorToEnd(el) { if (typeof el.selectionStart == "number") { el.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found