Caret not focusing in correct area on initial click

[jkhaui]

edit: I realised this might be an issue with draft.js, not Draftail. Currently investigating further

Do you want to request a feature or report a bug? bug

What is the current behavior? When the placeholder is clicked, the caret focuses beneath the placeholder's original position. Then, when the first character is typed, the caret jumps back up to where the placeholder was.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. GIFs and screenshots are very helpful too. https://misc-ddocs.s3-ap-southeast-2.amazonaws.com/draftail-focus.gif

Current config: <DraftailEditor rawContentState={ initial || null } placeholder="Write something..." autoCapitalize="true" spellCheck={ true } showUndoControl={ true } showRedoControl={ true } ref={ this.editorContainer } onSave={ onSave } blockTypes={ [ { type: BLOCK_TYPE.HEADER_THREE }, { type: BLOCK_TYPE.UNORDERED_LIST_ITEM } ] } inlineStyles={ [ { type: INLINE_STYLE.BOLD }, { type: INLINE_STYLE.ITALIC } ] } /> What is the expected behavior? The caret should be placed at exactly the same level at the initial click and when the user starts typing. Also, the placeholder should not be able to be selected (seems easily fixed with user-select: none css attribute. Which versions of Draftail + Draft.js, and which browser / OS are affected by this issue? Did this work in previous versions of Draftail or Draft.js? Latest. I'm new to the Draft.js ecosystem coming straight from contenteditable. Draftail seems amazing, but I'd advise you make your docs a bit clearer for newcomers like me. E.g. (Unrelated to current issue): On the getting-started page, @import "draft-js/dist/Draft"; does not work. It's import "draft-js/dist/Draft.css" that imports the css files. Also, maybe I'm just slow, but not sure what the decorator is for

[jkhaui]

Ok, so I sort of fixed my issue, but I'll leave it open for now because it definitely feels like I'm doing an unnecessary workaround. Some context to my solution below:

• I'm using React refs to directly work with the Draftail component;
• I'm following draft.js best practices add calling focus() when a div wrapper I added is clicked. https://draftjs.org/docs/advanced-topics-managing-focus
• The wrapper solution is necessary, because I tried to modify the placeholder's position with CSS and then the caret would not focus at all (I assume the placeholder container was covering the actual editor).

<div onClick={ () => this.editorContainer.current.focus() }>
    <DraftailEditor
        rawContentState={ initial || null }
        placeholder="Write something..."
        autoCapitalize="true"
        spellCheck={ true }
        showUndoControl={ true }
        showRedoControl={ true }
        ref={ this.editorContainer }
        onSave={ onSave }
        blockTypes={
            [ { type: BLOCK_TYPE.HEADER_THREE },
                { type: BLOCK_TYPE.UNORDERED_LIST_ITEM } ] }
        inlineStyles={ [ { type: INLINE_STYLE.BOLD },
            { type: INLINE_STYLE.ITALIC } ] }
    />
</div>

Also, note that calling focus directly on the Draftail component without the wrapper does not work:

<DraftailEditor
    rawContentState={ initial || null }
    onClick={ () => this.editorContainer.current.focus() }
    placeholder="Write something..."
    autoCapitalize="true"
    spellCheck={ true }
    showUndoControl={ true }
    showRedoControl={ true }
    ref={ this.editorContainer }
    onSave={ onSave }
    blockTypes={
        [ { type: BLOCK_TYPE.HEADER_THREE },
            { type: BLOCK_TYPE.UNORDERED_LIST_ITEM } ] }
    inlineStyles={ [ { type: INLINE_STYLE.BOLD },
        { type: INLINE_STYLE.ITALIC } ] }
/>

[thibaudcolas]

Hey @jkhaui, thank you for taking the time to write a detailed report!

I can’t reproduce those issues in my examples (selecting the placeholder text, and having the caret in a different position). I think this is most likely because of some custom styles that you’ve applied to your editor – could you share those styles here?

In particular,

• With the default styles, the placeholder text is meant to be underneath the first block (position: absolute), so it should be impossible to select.
• There shouldn’t be any more than one clickable block in an empty editor, which should again be visually placed on top of the placeholder

Based on your screen recording, it looks like the empty block is placed visually below the placeholder instead of overlapping it.

For focus management, it depends on what you want to achieve – again with the default styles, padding should be set so any area within the black borders of the editor is clickable and can be used to focus it. With your styles, it looks like the whole page is meant to be clickable, hence why you would need to have manual focus manipulation like this.

And for:

<DraftailEditor
    onClick={ () => this.editorContainer.current.focus() }
/>

The editor does not have an onClick prop, so this is indeed not meant to work.

---

On the getting-started page, @import "draft-js/dist/Draft"; does not work. It's import "draft-js/dist/Draft.css"

The @import syntax comes from Sass, whereas I would assume you’ve done what you suggested directly inside JS code, presumably compiled with Webpack. I might want to change this part of the docs to clarify that!

If you have other suggestions on how to make the docs easier to understand for newcomers, they are very welcome.

[thibaudcolas]

I’ll close this now – looks like a styles issue as I explained above, please let me know if there is more to it.

I’ve also updated the documentation to make it clearer how to import styles, https://www.draftail.org/docs/next/getting-started.