Ask Question

DraftJS click on Button, but keeping the focus on the Editor

I want to create a custom toolbar for mit DraftJS Editor. There I want to have several buttons which perform actions (like making the selected Text bold) on the editor.

My problem is that as soon as the user clicks the button, the editor looses its focus and no actions can be performed on the selected text.

What is the solution for this?

Reactdraftjs

3262 views

Author´s Dominik Sumer image

Dominik Sumer

Last edited on

2 Answers

Answer this question
Best answer

The solution for this, is to prevent the default behavior of the MouseDown event of your buttons, so that it doesn't bubble up (because this would tell the DraftJS editor to blur itself).

This should solve your problem:

<button 
  onMouseDown={(e) => e.preventDefault()}
  onClick={/* do whatever you like, the editor will still have its focus */}
>
  Bold
</button>
Author´s Dominik Sumer image

Dominik Sumer

👍
2
Last edited on