Issue clearing input on key press

[KieranVieira]

Do you want to request a feature or report a bug?

Bug

What's the current behavior?

When clearing input on key press enter I get a slate error. Example in this sandbox

Slate: 0.57.1
Browser: Chrome
OS: Windows

I have tried the suggestions in #713 and #300

What's the expected behavior?

Should remove the input content, the same as the behavior of the button in the sandbox.

[aykutkardas]

This is because the cursor is still looking for a block after the action.

You won't have this problem when you click on a button. Because the editor loses focus.

Import ReactEditor value from slate-react.

import { Editable, withReact, Slate, ReactEditor } from "slate-react";

Use the ReactEditor.blur method to lose focus before saving the new value.

  <Editable
    placeholder="Write text and press enter to see error."
    onKeyDown={e => {
      if (e.key === "Enter") {
        e.preventDefault();
        ReactEditor.blur(editor);

        setValue([
          {
            type: "paragraph",
            children: [{ text: "" }]
          }
        ]);
      }
    }}
  />

[aykutkardas]

Or it can import Transforms and Editor values.

import { createEditor, Transforms, Editor } from "slate";

With the Transforms.select method, you can move the cursor to the beginning of the editor.

  <Editable
    placeholder="Write text and press enter to see error."
    onKeyDown={e => {
      if (e.key === "Enter") {
        e.preventDefault();
        Transforms.select(editor, Editor.start(editor, []));
        setValue([
          {
            type: "paragraph",
            children: [{ text: "" }]
          }
        ]);
      }
    }}
  />

[KieranVieira]

Ah right that makes sense, thanks for the quick help and detailed explanation.