event.currentTarget is null in onMouseMove event handler

[yenshih]

Browser: Chrome LTS
React ver: LTS

class Dropdown extends PureComponent {
    constructor(props) {
        super(props)
        this.handleMouseMove = this.handleMouseMove.bind(this)
        this.handleThrottleMouseMove = throttle(this.handleThrottleMouseMove.bind(this), 200)
    }

    handleMouseMove(event) {
        event.persist()
        this.handleThrottleMouseMove(event)
    }

    handleThrottleMouseMove(event) {
        console.log(event.currentTarget) // null
    }

    render() {
        const { options } = this.props
        return (
            <ul>
                {options.map((option, i) => (
                    <li
                        key={i}
                        onMouseMove={this.handleMouseMove}
                    >
                        {option}
                    </li>
                ))}
            </ul>
        )
    }
}

I guess event.currentTarget might be <li> element, but it's null.
It seems so weird because event.currentTarget would refers to the element to which the event handler has been attached.
I was wondering if someone could help me solve this problem. Thanks :)

[koba04]

Currently, event.currentTarget doesn't persist because it's released after dispatching an event.

https://github.com/facebook/react/blob/master/src/renderers/shared/shared/event/EventPluginUtils.js#L91-L101

It might be able to avoid to assign null after dispatching an event because event.currentTarget is released in its destructor except in the case of the event is persistent.

https://github.com/facebook/react/blob/master/src/renderers/shared/shared/event/SyntheticEvent.js#L170-L177

But I'm not sure what that change affects.

[aweary]

When an event bubbles then event.currentTarget will be updated to the current element that it is handling it. You can see that dispatchEvent is called for every function in dispatchListeners, so its updated on every iteration.

@yenshih are you relying on bubbling/capturing at all? Can you use event.target instead if not? If you need to use event.currentElement you can retain a reference to the element yourself and use that instead.

handleMouseMove(event) {
  event.persist()
  const element = event.currentElement
  this.handleThrottleMouseMove(event, element)
}

handleThrottleMouseMove(event, element) {
  console.log(element) // <li /> or whatever
}

[aweary]

Closing since there's been no response and I believe this is expected behavior

[divyenduz]

Even using this approach with react 16.2.0 gave me undefined for event.currentElement called right after persist. Any thoughts?

[thedanheller]

Any solution to this?