Choosing value by click while in composition mode makes irregular content state

[popovicanja]

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

Bug

What is the current behavior?

If you have custom non-contentEditable text element as a part of customBlockRenderer, when you are in composition mode, while trying to choose one of suggested options(by clicking on option) => editor onChange event is triggered with irregular new state, as it removes previous content from active content block and provides text from non-edtitable custom component.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. You can use this jsfiddle to get started: https://jsfiddle.net/gmertk/e61z7nfa/.

As a part of customBlockRenderer, I am providing custom component:

{
      component: DraftJsSubtitleRow,
      props: subtitleRowProps,
}),

DraftJsSubtitleRow has structure like this:

   <>
          <Row>
              <div onMouseDown={onTextBlockMouseDown}>
                <EditorBlock {...props} block={block} blockProps={blockProps} />
              </div>
          </Row>

          <SplitAndMergeToolbar
            currentSubtitleItem={blockData}
            currentBlock={block}
            getContentState={blockProps.getContentState}
            getEntityState={blockProps.getEntityState}
            isLongerThanLimit={isLongerThanLimit}
          />
 </>

, where SplitAndMergeToolbar is custom component which has few span elements with text inside.

When I try to insert new cjk characters using composition mode, instead of applying text from chosen option, it takes text from custom component span elements. Probably because custom component is placed under the EditorBlock component, and composition menu is placed above custom component, so selection is maybe stuck on custom component node instead of EditorBlock node. I tried adding contentEditable={false} and user-select: none on custom component, but it is not helping.

What is the expected behavior?

It should provide regular correct state with applied text from chosen option in composition mode ; It should not include text from custom elements

Which versions of Draft.js, and which browser / OS are affected by this issue? Did this work in previous versions of Draft.js?

0.11.7