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

24 views

Authorยดs Dominik Sumer image

Dominik Sumer

Last edited on

1 Answer available

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>
๐Ÿ‘
1
Last edited on