Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Draft.js crashes when using typetext #2365

Closed
MichaReiser opened this issue May 2, 2018 · 10 comments
Closed

Draft.js crashes when using typetext #2365

MichaReiser opened this issue May 2, 2018 · 10 comments
Assignees
@AlexKamaev
Labels
STATE: Auto-locked An issue has been automatically locked by the Lock bot. SYSTEM: automations TYPE: bug The described behavior is considered as wrong (bug).
Milestone
Sprint #12

Comments

@MichaReiser
Copy link

Are you requesting a feature or reporting a bug?

bug

What is the current behavior?

Using typeText to write in the draft.js editor results in a draft.js editor error. It works fine with Firef

Error printed on console

react.js:1428 Uncaught TypeError: Cannot read property 'replaceChild' of null
    at Function.replaceChildWithTree (react.js:1428)
    at Object.dangerouslyReplaceNodeWithMarkup (react.js:2057)
    at Object.wrapper [as replaceNodeWithMarkup] (react.js:12389)
    at ReactCompositeComponentWrapper._replaceNodeWithMarkup (react.js:6029)
    at ReactCompositeComponentWrapper._updateRenderedComponent (react.js:6019)
    at ReactCompositeComponentWrapper._performComponentUpdate (react.js:5993)
    at ReactCompositeComponentWrapper.updateComponent (react.js:5922)
    at ReactCompositeComponentWrapper.wrapper [as updateComponent] (react.js:12389)
    at ReactCompositeComponentWrapper.receiveComponent (react.js:5845)
    at Object.receiveComponent (react.js:13115)
replaceChildWithTree @ react.js:1428
dangerouslyReplaceNodeWithMarkup @ react.js:2057
ReactComponentBrowserEnvironment_replaceNodeWithMarkup @ react.js:12389
_replaceNodeWithMarkup @ react.js:6029
_updateRenderedComponent @ react.js:6019
_performComponentUpdate @ react.js:5993
updateComponent @ react.js:5922
ReactCompositeComponent_updateComponent @ react.js:12389
receiveComponent @ react.js:5845
receiveComponent @ react.js:13115
updateChildren @ react.js:4190
_reconcilerUpdateChildren @ react.js:11742
_updateChildren @ react.js:11835
updateChildren @ react.js:11823
_updateDOMChildren @ react.js:7174
updateComponent @ react.js:7020
receiveComponent @ react.js:6976
ReactDOMComponent_receiveComponent @ react.js:12389
receiveComponent @ react.js:13115
_updateRenderedComponent @ react.js:6011
_performComponentUpdate @ react.js:5993
updateComponent @ react.js:5922
ReactCompositeComponent_updateComponent @ react.js:12389
receiveComponent @ react.js:5845
receiveComponent @ react.js:13115
updateChildren @ react.js:4190
_reconcilerUpdateChildren @ react.js:11742
_updateChildren @ react.js:11835
updateChildren @ react.js:11823
_updateDOMChildren @ react.js:7174
updateComponent @ react.js:7020
receiveComponent @ react.js:6976
ReactDOMComponent_receiveComponent @ react.js:12389
receiveComponent @ react.js:13115
_updateRenderedComponent @ react.js:6011
_performComponentUpdate @ react.js:5993
updateComponent @ react.js:5922
ReactCompositeComponent_updateComponent @ react.js:12389
receiveComponent @ react.js:5845
receiveComponent @ react.js:13115
updateChildren @ react.js:4190
_reconcilerUpdateChildren @ react.js:11742
_updateChildren @ react.js:11835
updateChildren @ react.js:11823
_updateDOMChildren @ react.js:7174
updateComponent @ react.js:7020
receiveComponent @ react.js:6976
ReactDOMComponent_receiveComponent @ react.js:12389
receiveComponent @ react.js:13115
updateChildren @ react.js:4190
_reconcilerUpdateChildren @ react.js:11742
_updateChildren @ react.js:11835
updateChildren @ react.js:11823
_updateDOMChildren @ react.js:7174
updateComponent @ react.js:7020
receiveComponent @ react.js:6976
ReactDOMComponent_receiveComponent @ react.js:12389
receiveComponent @ react.js:13115
_updateRenderedComponent @ react.js:6011
_performComponentUpdate @ react.js:5993
updateComponent @ react.js:5922
ReactCompositeComponent_updateComponent @ react.js:12389
receiveComponent @ react.js:5845
receiveComponent @ react.js:13115
updateChildren @ react.js:4190
_reconcilerUpdateChildren @ react.js:11742
_updateChildren @ react.js:11835
updateChildren @ react.js:11823
_updateDOMChildren @ react.js:7174
updateComponent @ react.js:7020
receiveComponent @ react.js:6976
ReactDOMComponent_receiveComponent @ react.js:12389
receiveComponent @ react.js:13115
updateChildren @ react.js:4190
_reconcilerUpdateChildren @ react.js:11742
_updateChildren @ react.js:11835
updateChildren @ react.js:11823
_updateDOMChildren @ react.js:7174
updateComponent @ react.js:7020
receiveComponent @ react.js:6976
ReactDOMComponent_receiveComponent @ react.js:12389
receiveComponent @ react.js:13115
updateChildren @ react.js:4190
_reconcilerUpdateChildren @ react.js:11742
_updateChildren @ react.js:11835
updateChildren @ react.js:11823
_updateDOMChildren @ react.js:7174
updateComponent @ react.js:7020
receiveComponent @ react.js:6976
ReactDOMComponent_receiveComponent @ react.js:12389
receiveComponent @ react.js:13115
_updateRenderedComponent @ react.js:6011
_performComponentUpdate @ react.js:5993
updateComponent @ react.js:5922
ReactCompositeComponent_updateComponent @ react.js:12389
receiveComponent @ react.js:5845
receiveComponent @ react.js:13115
updateChildren @ react.js:4190
_reconcilerUpdateChildren @ react.js:11742
_updateChildren @ react.js:11835
updateChildren @ react.js:11823
_updateDOMChildren @ react.js:7174
updateComponent @ react.js:7020
receiveComponent @ react.js:6976
ReactDOMComponent_receiveComponent @ react.js:12389
receiveComponent @ react.js:13115
updateChildren @ react.js:4190
_reconcilerUpdateChildren @ react.js:11742
_updateChildren @ react.js:11835
updateChildren @ react.js:11823
_updateDOMChildren @ react.js:7174
updateComponent @ react.js:7020
receiveComponent @ react.js:6976
ReactDOMComponent_receiveComponent @ react.js:12389
receiveComponent @ react.js:13115
_updateRenderedComponent @ react.js:6011
_performComponentUpdate @ react.js:5993
updateComponent @ react.js:5922
ReactCompositeComponent_updateComponent @ react.js:12389
performUpdateIfNecessary @ react.js:5861
performUpdateIfNecessary @ react.js:13134
runBatchedUpdates @ react.js:13767
perform @ react.js:15976
perform @ react.js:15976
perform @ react.js:13713
flushBatchedUpdates @ react.js:13789
ReactUpdates_flushBatchedUpdates @ react.js:12389
closeAll @ react.js:16042
perform @ react.js:15989
batchedUpdates @ react.js:9261
batchedUpdates @ react.js:13721
dispatchEvent @ react.js:10737
a @ hammerhead.js:9
(anonymous) @ hammerhead.js:3
dispatchEvent @ hammerhead.js:3
e._raiseDispatchEvent @ hammerhead.js:4
e._dispatchEvent @ hammerhead.js:4
e.input @ hammerhead.js:4
(anonymous) @ testcafe-automation.js:3
s @ hammerhead.js:1
p @ hammerhead.js:1
d @ hammerhead.js:1
r @ hammerhead.js:1
setTimeout (async)
o @ hammerhead.js:1
u @ hammerhead.js:1
l @ hammerhead.js:1
n @ hammerhead.js:1
setTimeout (async)
(anonymous) @ testcafe-automation.js:3
i @ hammerhead.js:1
h @ hammerhead.js:1
t.default @ testcafe-automation.js:3
d @ testcafe-automation.js:3
c @ testcafe-automation.js:3
t.default @ testcafe-automation.js:3
t._typeChar @ testcafe-automation.js:3
(anonymous) @ testcafe-automation.js:3
s @ hammerhead.js:1
p @ hammerhead.js:1
d @ hammerhead.js:1
r @ hammerhead.js:1
setTimeout (async)
o @ hammerhead.js:1
u @ hammerhead.js:1
l @ hammerhead.js:1
n @ hammerhead.js:1
setTimeout (async)
(anonymous) @ testcafe-core.js:1
i @ hammerhead.js:1
h @ hammerhead.js:1
e.default @ testcafe-core.js:1
(anonymous) @ testcafe-automation.js:3
s @ hammerhead.js:1
p @ hammerhead.js:1
d @ hammerhead.js:1
r @ hammerhead.js:1
setTimeout (async)
o @ hammerhead.js:1
u @ hammerhead.js:1
l @ hammerhead.js:1
n @ hammerhead.js:1
setTimeout (async)
(anonymous) @ testcafe-core.js:1
i @ hammerhead.js:1
h @ hammerhead.js:1
e.default @ testcafe-core.js:1
(anonymous) @ testcafe-automation.js:1
s @ hammerhead.js:1
p @ hammerhead.js:1
d @ hammerhead.js:1
r @ hammerhead.js:1
setTimeout (async)
o @ hammerhead.js:1
u @ hammerhead.js:1
l @ hammerhead.js:1
n @ hammerhead.js:1
setTimeout (async)
(anonymous) @ testcafe-core.js:1
i @ hammerhead.js:1
h @ hammerhead.js:1
e.default @ testcafe-core.js:1
(anonymous) @ testcafe-automation.js:3
s @ hammerhead.js:1
p @ hammerhead.js:1
d @ hammerhead.js:1
r @ hammerhead.js:1
setTimeout (async)
o @ hammerhead.js:1
u @ hammerhead.js:1
l @ hammerhead.js:1
n @ hammerhead.js:1
setTimeout (async)
(anonymous) @ testcafe-automation.js:3
i @ hammerhead.js:1
h @ hammerhead.js:1
t.default @ testcafe-automation.js:3
s @ hammerhead.js:1
p @ hammerhead.js:1
d @ hammerhead.js:1
r @ hammerhead.js:1
setTimeout (async)
o @ hammerhead.js:1
u @ hammerhead.js:1
l @ hammerhead.js:1
n @ hammerhead.js:1
setTimeout (async)
(anonymous) @ testcafe-automation.js:3
i @ hammerhead.js:1
h @ hammerhead.js:1
t.default @ testcafe-automation.js:3
s @ hammerhead.js:1
p @ hammerhead.js:1
d @ hammerhead.js:1
r @ hammerhead.js:1
setTimeout (async)
o @ hammerhead.js:1
u @ hammerhead.js:1
l @ hammerhead.js:1
n @ hammerhead.js:1
setTimeout (async)
(anonymous) @ testcafe-core.js:1
i @ hammerhead.js:1
h @ hammerhead.js:1
e.default @ testcafe-core.js:1
(anonymous) @ testcafe-automation.js:3
s @ hammerhead.js:1
p @ hammerhead.js:1
d @ hammerhead.js:1
r @ hammerhead.js:1
setTimeout (async)
o @ hammerhead.js:1
u @ hammerhead.js:1
l @ hammerhead.js:1
n @ hammerhead.js:1
setTimeout (async)
(anonymous) @ testcafe-core.js:1
i @ hammerhead.js:1
h @ hammerhead.js:1
e.default @ testcafe-core.js:1
(anonymous) @ testcafe-core.js:1
i @ hammerhead.js:1
h @ hammerhead.js:1
t.wait @ testcafe-core.js:1
(anonymous) @ testcafe-driver.js:2
s @ hammerhead.js:1
p @ hammerhead.js:1
d @ hammerhead.js:1
r @ hammerhead.js:1
setTimeout (async)
o @ hammerhead.js:1
u @ hammerhead.js:1
l @ hammerhead.js:1
n @ hammerhead.js:1
t @ testcafe-core.js:2
n @ testcafe-core.js:2

What is the expected behavior?

Hello World is written to the draft.js editor

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

Run the test code below.

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

Tested page URL: https://draftjs.org

Test code

fixture("Draft.js").page("https://draftjs.org/");

test("Can type into the draftjs editor", async t => {
  await t.typeText(".public-DraftStyleDefault-block", "Hello World");
});

Specify your

  • operating system: Windows
  • testcafe version: 0.19 & 0.20.0-alpha2
  • node.js version: node 9.11.1
@MichaReiser
Copy link
Author

The changes from @AlexKamaev linked in the issue #1956 seem to fix this issue as well.

The only issue that than remains is that the whitespace between Hello and World is omitted.

@AlexKamaev AlexKamaev self-assigned this May 3, 2018
@AlexKamaev AlexKamaev added TYPE: bug The described behavior is considered as wrong (bug). SYSTEM: automations labels May 3, 2018
@AlexKamaev
Copy link
Contributor

I'll investigate it

@AlexKamaev AlexKamaev added STATE: Need clarification An issue lacks information for further research. and removed TYPE: bug The described behavior is considered as wrong (bug). labels May 3, 2018
@AlexKamaev
Copy link
Contributor

I've reproduced it

@AlexKamaev AlexKamaev added TYPE: bug The described behavior is considered as wrong (bug). and removed STATE: Need clarification An issue lacks information for further research. labels May 3, 2018
@MichaReiser
Copy link
Author

An update from my side using testcafe with your current fixes

  • Edge: Draft.js editor still crashes
  • IE: It adds an unnecessary line break as first character
  • Firefox: Paste adds the first character twice
  • Chrome: Typing omits whitespace characters

Thanks for investigating. If I can help, let me know

AlexKamaev added a commit to AlexKamaev/testcafe that referenced this issue May 10, 2018
@AlexKamaev
fix issues with Chrome and whitespaces (DevExpress#2365)
4b8a91a
AlexKamaev added a commit to AlexKamaev/testcafe that referenced this issue May 11, 2018
@AlexKamaev
fix issues with Chrome and whitespaces (DevExpress#2365)
1159c35
@AndreyBelym AndreyBelym added this to the Sprint #12 milestone May 15, 2018
AlexKamaev added a commit to AlexKamaev/testcafe that referenced this issue May 17, 2018
@AlexKamaev
fix selection after mousedown if contenteditable div contains only on…
5c70900 
…e new line char (DevExpress#2365)
AlexKamaev added a commit to AlexKamaev/testcafe that referenced this issue May 17, 2018
@AlexKamaev
fix issues with Chrome and whitespaces (DevExpress#2365)
4169036
AlexKamaev added a commit to AlexKamaev/testcafe that referenced this issue May 17, 2018
@AlexKamaev
fix selection after mousedown if contenteditable div contains only on…
01a5add 
…e new line char (DevExpress#2365)
AlexKamaev added a commit that referenced this issue May 22, 2018
@AlexKamaev
fix issue with Chrome and whitespaces (#2365) (#2388)
9264e69 
* fix issues with Chrome and whitespaces (#2365)

* fix review remarks
AlexKamaev added a commit to AlexKamaev/testcafe that referenced this issue May 22, 2018
@AlexKamaev
fix selection after mousedown if contenteditable div contains only on…
d85efd1 
…e new line char (DevExpress#2365)
AlexKamaev added a commit to AlexKamaev/testcafe that referenced this issue May 22, 2018
@AlexKamaev
fix selection after mousedown if contenteditable div contains only on…
ace9fe3 
…e new line char (DevExpress#2365)
AlexKamaev added a commit that referenced this issue May 28, 2018
@AlexKamaev
fix selection after mousedown if contenteditable div contains only on…
8274923 
…e new line char (#2365) (#2426)

* fix selection after mousedown if contenteditable div contains only one new line char (#2365)

* remove confusing function
@AlexKamaev
Copy link
Contributor

@MichaReiser I've fixed the issues with Chrome, IE and Edge, but could not reproduce the issues with Firefox

@MichaReiser
Copy link
Author

MichaReiser commented May 29, 2018 •
edited
Loading

Thank's Alex. Maybe you already fixed it in an earlier version?

If I change the test to use paste then the result using the latest testcafe version and firefox is

fixture("Draft.js").page("https://draftjs.org/");

test("Can type into the draftjs editor", async t => {
  await t.typeText(".public-DraftStyleDefault-block", "Hello World", { paste: true })
});

1

@AlexKamaev
Copy link
Contributor

Now I see. It is reproduced only when with paste: true option

@AlexKamaev
Copy link
Contributor

AlexKamaev commented May 30, 2018 •
edited
Loading

@MichaReiser I've researched the issue with duplicating the first symbol and found that it occurs due to limited support for the 'paste' operation. The 'onpaste' event is not raised, so Draft.js mechanisms could not process typing correctly. We already have an issue with the 'onpaste' event reported in our database, please refer to #2075. As a workaround I recommend you to remove paste: true option.

@MichaReiser
Copy link
Author

Thank you @AlexKamaev. Removing paste here is a valid workaround. Nevertheless, I'm looking forward to the support of the on paste event since typing a complete article takes its time ;)

@miherlosev miherlosev mentioned this issue Jun 5, 2018
Closed
@lock
Copy link

lock bot commented Mar 28, 2019

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.

@lock lock bot added the STATE: Auto-locked An issue has been automatically locked by the Lock bot. label Mar 28, 2019
@lock lock bot locked as resolved and limited conversation to collaborators Mar 28, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@AlexKamaev AlexKamaev

Labels
STATE: Auto-locked An issue has been automatically locked by the Lock bot. SYSTEM: automations TYPE: bug The described behavior is considered as wrong (bug).
Projects
None yet
Milestone
Sprint #12
Development

No branches or pull requests
3 participants
@MichaReiser @AlexKamaev @AndreyBelym