0

I've scoured other answers, this one coming the closest to what I'm dealing with.

But my issue remains. I cannot access the properties of a synthetic event. Like shiftKey

For some context, I'm using an onClick handler that comes packaged with react-d3-tree library

I thought it was just this library causing problems. But in the click handler I am able to print the event to the console, and I can see the shiftKey parameter is set as expected. But every time I try to access event.shiftKey I get the error:

index.js:1452 Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the property `shiftKey` on a released/nullified synthetic event. This is set to null. If you must keep the original synthetic event around, use event.persist().

See my code sample.

Update: Repo to replicate issue https://github.com/mwilde345/reactBrokenClick

Matt Wilde
  • 271
  • 2
  • 18
  • I just tried to reproduce this error on my machine, and I did not get the error you got. Is there maybe something more that you have which may not be shown here? – Chaim Friedman Dec 06 '18 at 02:08
  • Thanks for trying, I really wish I could provide more, that's what makes this so confusing. The above seems to work for everyone. I'll make a barebones git repo with the d3 package I am using, and make sure it can be reproduced there, then update post here. – Matt Wilde Dec 06 '18 at 06:45
  • @ChaimFriedman take a look: https://github.com/mwilde345/reactBrokenClick – Matt Wilde Dec 06 '18 at 07:27
  • The code differs from what you originally posted. The problem is in third-party component, https://github.com/bkrem/react-d3-tree/blob/master/src/Tree/index.js#L271 . event object is used asynchronously there. `persist()` should be called there and not in your own component. – Estus Flask Dec 06 '18 at 07:34
  • @estus thanks for diving into that. I see that method is used as an included onClick method: https://github.com/bkrem/react-d3-tree/blob/master/src/Tree/index.js#L459. So there are actually two onClick calls made every time i click a node. I updated my original question with the new repo code. I'll make your suggested change tomorrow and make sure it works. If so, I think it's worth you posting an answer. I can use that for a PR on that library. – Matt Wilde Dec 06 '18 at 07:40
  • I'll post it shortly. Consider posting your current code in addition to the link. Links tend to break, questions become useless for future readers. – Estus Flask Dec 06 '18 at 07:48

1 Answers1

0

The way objects appear in console shouldn't be relied on. Objects are passed by reference in JavaScript. If object internals are updated at some point, they will be updated in console.

persist() creates a copy of event object, so it should appear in console as a snapshot at the moment it was called. That the problem occurs with persist() means that something went wrong with it.

The problem is caused by third-party component, Tree from react-d3-tree. Event object is used asynchronously, persist() in user code won't have desirable results, Instead, persist() should be synchronously called in Tree component.

Estus Flask
  • 206,104
  • 70
  • 425
  • 565
  • to close the loop, a commit was made to fix this issue: https://github.com/bkrem/react-d3-tree/commit/90feb50f80e154f64479ea9ba0b907422f7e6e1f – Matt Wilde Dec 07 '18 at 17:31