Search code examples
javascriptreactjsinputevent

InputEvent.dataTransfer is always null

I have the following element in my component:

<div className="document" contentEditable="true" placeholder="Write something...." ref={this.document} onBlur={this.onBlur} onInput={this.onInput} dangerouslySetInnerHTML={{__html: document.content}}></div>

And the following is the function onInput:

onInput(event) {
    event = event.nativeEvent;
    console.log(event.dataTransfer); // This is null
}

I want to use dataTransfer to figure out if something was pasted/dropped, without listening to each one's specific event, in order to have everything managed from the InputEvent (Because InputEvent fires for most actions I want to listen to already)

Even the example on MDN isn't working because dataTransfer is null: https://developer.mozilla.org/en-US/docs/Web/API/InputEvent/dataTransfer

Why is this happening? Is this some standard that has not been implemented yet?

Solution

  • The MDN example works in Firefox, but not in Chrome. On the other hand, in the same MDN example, listening to beforeinput rather than input works in Chrome, but not Firefox. So using a combination of the two events should work across the two browsers.

    As far as I can tell, the specification says the attribute should be set in both cases.