Up and Down Arrows do not work

[ChenCodes]

Do you want to request a feature or report a bug? Bug What is the current behavior? When I am using the DraftJSEditor, I am seeing that up and down arrows do not seem to work.

**If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. You can use this jsfiddle to get started: I don't have the code available as most of it is proprietary but it contains the basic scaffold of an Editor.js file. I have some code below of a workaround that I attempted.

1. Type a couple lines of text inside the text field.
2. Try to press the up key - nothing happens.
3. Click on an earlier row, and then press the down key, nothing happens as well.

What is the expected behavior? When I press on the up/down arrow keys the cursor should move accordingly upwards and downwards.

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.1 (initial test was done on 0.10.1, but then I upgraded to the latest version 0.10.5 and the issue was still showing up) Browser: Chrome Not sure if it worked in previous versions of Draft.js.

Additional Notes: One interesting thing that I noticed is that when I add the onUpArrow handler to my Editor component and then logged the result of the callback, I was getting back a Class object instead of the usual EditorState object that gets passed into the onChange.

Here's a workaround that I tried that didn't seem to work:

onArrow = event => {
        const { editorState, onChange } = this.props;
        const editorSelection = editorState.getSelection();
        const prevStartKey = editorSelection.getStartKey();

        const content = editorState.getCurrentContent();
        const keyBefore = content.getKeyBefore(prevStartKey);
        const prevAnchorOffset = editorSelection.getAnchorOffset();
        const prevFocusOffset = editorSelection.getFocusOffset();

        const selection = editorSelection.merge({
            anchorKey: prevStartKey,
            anchorOffset: prevAnchorOffset,
            focusKey: prevStartKey,
            focusOffset: prevFocusOffset,
        });

        const updatedEditorState = DraftEditorState.acceptSelection(
            editorState,
            selection,
        );
        const newEditorState = DraftEditorState.forceSelection(
            updatedEditorState,
            updatedEditorState.getSelection(),
        );
        onChange(newEditorState);
    };

My idea above is that maybe I could programmatically move the cursor either up or down depending on which handler was called. For some reason even though the new updatedEditorState looks like it has an updated editorSelection and the view has re-rendered, the cursor refuses to move up when I press on the up key.

Any help would be greatly appreciated!!

[thibaudcolas]

@ChenCodes up/down arrows move the cursor as I would expect in my editor, as well as in the editor on https://draftjs.org/. Does that one work as you would expect?

There shouldn't be any code required to make the cursor move within text, so if anything I would expect you have some code that captures those events and discards them.

[andrescabana86]

this is happening to me now, I am using 0.10.38

[axelander]

@ChenCodes @andrescabana86 we are getting reports about similiar issues in one of our applications, did you find anything regarding this?