Search code examples
javascriptcssreactjsdraftjs

How to give a focus effect to my Draft JS Editor border?

I understand that the draft js editor is not a classic textarea element. I applied some styles to make it look better. However, i can't find this little trick that doing a natural html focus effect when i'm focusing on my draftjs editor. I am not a css expert, i've tried to using the :active pseudo class the effect disappear once a release the click.

I just want the borders to be like a classic html input focus effect.

How can a set up this ?

thanks

Solution

  • You can keep track of whether or not the editor has focus by listening for onFocus and onBlur on it. You can then use this information to set classnames accordingly. Here's an example that makes the border red when it has focus:

    https://jsfiddle.net/m7tovuqa/