React: Bug: event.currentTarget is null even with event.persist()

[gfranko]

After using ev.persist(), ev.currentTarget is null (all other properties are kept intact). Is there any reason for this? Here is my jsfiddle. Thanks!

[sophiebits]

currentTarget changes as the event bubbles up – if you had a event handler on the element receiving the event and others on its ancestors, they'd see different values for currentTarget. IIRC nulling it out is consistent with what happens on native events; if not, let me know and we'll reconsider our behavior here.

[gfranko]

event.currentTarget should always be the element the event listener is created on, and should not change as the event bubbles up.

[sophiebits]

http://jsbin.com/pirayosura/1/edit?html,js,output seems to disagree if you open the console and click the inner div.

[gfranko]

Ahhh okay, my bad! Thanks for the demo.

Is react always going to side with the current DOM event spec, or go the way of jQuery and patch specific things?

[sophiebits]

We won't always follow the DOM but we will unless there's a good reason to deviate – in this case, it really is the same event that both handlers are getting notified of, and the naming of currentTarget indicates that it's the handler that's _currently_ being executed so I think it makes sense to leave it like this and have it change as the event bubbles. (Making multiple event objects would also be worse for performance.)

[jinrichardJIN]

@sophiebits

[cevr]

@jinrichardJIN I believe it is because since synthetic events are pooled, at the moment you're viewing the object in google chrome, it has already been wiped to null. However, directly logging the property captures the reference, allowing it to be viewed on chrome.

[kolyo-peev]

@jinrichardJIN what do you mean by 'directly logging'? isn's a console.log() such a thing.. I can't find a way to see my event, this is horrible

[tommedema]

@kolyo-peev try event.persist() before you console.log it

[Maaartinus]

@sophiebits

We won't always follow the DOM but we will unless there's a good reason to deviate – in this case, it really is the same event that both handlers are getting notified of, and the naming of currentTarget indicates that it's the handler that's currently being executed so I think it makes sense to leave it like this and have it change as the event bubbles.

This sounds reasonable, but then, what's the point of event.persist()? I only persist the event, so I can use it later... and it must work the same as it does now. But it does not, as I the currentTarget is gone. And maybe more, I don't know.

Please consider extending the doc.

---

What I'm using now, is

event.persist();
event = {...event}

which seems to work, but may have problems.

Maybe you could offer some event.clone() returning a copy which never changes?

[matheen821]

const [anchorEl, setAnchorEl] = useState(null);

const handleClick: (eventElement: React.KeyboardEvent | React.MouseEvent){
    event.persist();
    setAnchorEl(event.currentTarget);   // this will work 
}

use setAnchorEl next line to event.persist(); then it will work, you can use or pass anchorEl to any component, it will work.