draftjsdraft-js-plugins

Draft-js static toolbar UX problem, button doesn't "light up"


I've searched for this problem and couldn't find any information about it. Why is this happening?

I'm trying to build a simple rich text editor with draftjs and I've encountered an UX problem with the static toolbar plugin.

Every time I click a button in the toolbar it doesn't "light up" (the ".active" class isn't added to it's styles) until the editor is clicked or the text is changed.

I decided to setup a codesandbox environment so you can easily test the code: https://codesandbox.io/s/pensive-cerf-r4rg5j?file=/src/App.js Simply try to add style to a piece of text and you'll see that the toolbar button doesn't light up when clicked and only lights up when the editor is clicked again.


Solution

  • Found the answer in draft-js-plugins issues: https://github.com/draft-js-plugins/draft-js-plugins/issues/1369