Draft-js: Draft Editor placeholder pushes caret to next line before text entry...

[steviesama]

In addition to the other issue, when you click on the part of the content area where the placeholder is, you can't put the text cursor focus there. You have to click on the line under the placeholder and the cursor appears there. As soon as you type, the placeholder goes away and the cursor jumps up to where it should have been to begin with.

And the render method:

[nie-xin]

I got the same problem, any idea?

[steviesama]

I've gotten tired on looking for a solution. At least in my case a placeholder isn't necessarily important. It is annoying though. 8*/ If someone addresses this issue, that'd be cool though. xD

[gdehmlow]

In "Issues and Pitfalls", they write that there might some problems if you don't include Draft.css. Not sure if that would help.

I have this same issue, but it's resolved by adding position: absolute to the .public-DraftEditorPlaceholder-root css class, which is the same style found in this file.

[steviesama]

I tried the position: absolute thing. It had no effect for me.

[steviesama]

Ok...part of it was Draft.css, but not because I didn't include it. I'm using webpack for one, and if you include the css, it renames all of the class names with the appended identifiers, and considering that draft.js is generating the class names dynamically, they weren't on statically defined elements for it to transform the element classname references.

I inspected it in chrome, and the draft generated classnames are normal but the includes file was mangled; if you use require(./Draft.css) that is. The resolution is to remove that, put the Draft.css in your root directory. And if using express, use app.use(express.static('.')); in your server.js so you can add a link tag to Draft.css in your index.html so you can reference files on the server from html.

However, you will still have the caret/cursor being on the next line problem with the placeholder text up. The problem there is I had the focus code in the wrong place. I'll add a screen shot of my changes below. What fixed it is writing the focus method, and making sure it is referenced by the editor containing div's onClick event handler. Div's can't be focused, so be sure it's click, and link it to focus, which puts focus on the editor, the editor has to have the ref="editor" in order for this to work.

[tridungbk2010]

The Problem is so simple cause of style "Draft.css", i copied that file and put directly to my component's directory => this problem is resolved :D

[steviesama]

@tridungbk2010 Draft.css only fixed part of it in my issue. Most of it was caret behavior, which the css didn't fix.

[Radivarig]

@steviesama works for me with this css

[steviesama]

@Radivarig Yea. The Draft.css did the trick for me. The caret behavior was code related though. There were some bugs I ran into. I worked around them though.

[nikhildaga]

Adding draft css fixes this issue

[AkyunaAkish]

This worked for me better than position absolute for when the editor begins to scroll.

.public-DraftEditorPlaceholder-root {
      color: rgb(186, 186, 193);
      padding-top: 3px;
      padding-left: 3px;
      margin-bottom: -20px;
}

[abheist]

Just import Draft.css from draft-js module.

import 'draft-js/dist/Draft.css';

Good luck ✌️