Draft-js: Backspace deleting the wrong character when removing text with entity attached

[blaesus]

Bug report

Current behavior

In case gif doesn't work: https://andreasblaesus.github.io/draftjs-backspace-entity-demo/bug-demo.mov

Demo and reproduction

A minimal demo extracted from actual code is available at https://jsfiddle.net/m212gsod/3/

Procedures to reproduce:

1. type something into the div
2. type # and letter a to enable tag searching for a
3. select the aaa from below, and an entity is inserted to cover the tag text.
4. click input again to focus the caret, then press backspace, and the character before the created tag is deleted, as if the caret is placed in the text

Expected behavior

When backspace is pressed, the entity and the text covered by the entity is removed, rather than characters before.

Versions

Reproduced in Draft.js 0.10.4 with React 16.2.0, on Chrome 62, Chrome 65, and Firefox 57 on macOS 10.12.6.
Not tested with earlier versions of Draft.js.

[blaesus]

I figured this out myself. For people encountering similar issues: in your decorator component, rendering props.children (even if set to display:none) solves this issue.
i.e.

Breaks:

const Link = (props) => {
    const data = props.contentState.getEntity(props.entityKey).getData()
    return (
        <a href={data.url} target="_blank">
            {data.url}
        </a>
      )
}

Works:

const Link = (props) => {
    const data = props.contentState.getEntity(props.entityKey).getData()
    return (
        <a href={data.url} target="_blank">
            {data.url} <span style={{display: 'none'}}>{props.children}</span>
        </a>
      )
}