Weird behaviour when typing into Slate Editor field in Chrome

[tamlyn]

Are you requesting a feature or reporting a bug?

Bug

What is the current behavior?

When using typeText into a Slate WYSIWYG editor input in Chrome or Safari, the text gets jumbled up.

What is the expected behavior?

Text should be input normally, like in FIrefox.

How would you reproduce the current behavior (if this is a bug)?

See this gist https://gist.github.com/tamlyn/08b4be11424f2539d4d5105ceebf3d4d

Provide the test code and the tested page URL (if applicable)

See above

Specify your

• operating system: MacOS 10.11
• testcafe version: 0.18.3
• node.js version: 8.9

[AndreyBelym]

Hello @tamlyn!

I reproduced the issue. You can try paste: true for typing options as a workaround:

.typeText('div[contenteditable=true]', 'This is some text which does not work', { paste: true })

[benbrandt]

I'm seeing similar behavior in when using DraftJS. It seems like maybe testcafe is modifying the DOM directly when using typeText, which is then causing React's virtual dom to become out of sync and causing errors to be thrown.

[AlexanderMoskovkin]

Hi @benbrandt, thanks for the info. Have you tried the approach with the paste: true option? Does it work in your case?

[benbrandt]

paste: true makes it so that it all gets input in the correct order. But then Draft starts throwing errors I think related to this: https://draftjs.org/docs/advanced-topics-issues-and-pitfalls.html#browser-plugins-extensions

[MichaReiser]

This issue might also be due to race conditions in your react code.
See the draft.js documentation for details.

[lock]

This thread has been automatically locked since it is closed and there has not been any recent activity. Please open a new issue for related bugs or feature requests. We recommend you ask TestCafe API, usage and configuration inquiries on StackOverflow.