Normalize event.dataTransfer for drag and drop events

[erikbrannstrom]

I'm currently implementing drag-and-drop in a React application where different kinds of data is dragged and dropped. This means I want to check for certain types on the event.dataTransfer object to see if drop should be enabled or not. Basically it looks like this:

onDragOver: function (event) {
    if (event.dataTransfer.types.indexOf('application/x-custom-type') > -1) {
        event.preventDefault();
    }
}

This works fine in Chrome, but less so in Firefox. It turns out that in Firefox the type of DataTransfer.types is DOMStringList, which does not have an indexOf method. According to the latest drafts of the HTML5 specification (W3C, WHATWG), returning an array like Webkit does is correct. Obviously, the fix is easy on my side (check which one of indexOf and contains is available and use that one), but I thought it might be useful to fix this in React instead, since it is at least related to the event system.

I could probably take a stab at this, but I wanted to gauge the interest. Perhaps the DataTransfer object is deemed to be out of scope for the synthetic event handler.

[zpao]

I think this seems like a pretty reasonable thing to do in React. We fixup other properties. cc @syranide

[syranide]

I'm not overly familiar with all the intricasies fo dragdrop/dataTransfer, but IIRC there's quite a lot that can be normalized/polyfilled and that seems like a worthwhile endeavour to me at least! 👍

[erikbrannstrom]

Cool! As I said, I can give it a go if you'd like. Basically, what I'm thinking is adding a SyntheticDataTransfer class which implements the defined DataTransfer interface from the specification, plus perhaps a nativeDataTransfer property. All interface properties and calls will return the corresponding property from the native DataTransfer object, except types which will be converted to an array if it is a DOMStringList.

If that sounds good it should be pretty straightforward to implement, though I'm not sure where the tests for this should go?

[aweary]

https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/types

As of Firefox 52, the DataTransfer.types property returns a frozen array of DOMStrings as per spec, rather than a DOMStringList.

The latest versions of Firefox are spec-compliant. Should we still consider polyfilling this for older versions of Firefox? cc @sophiebits

[sophiebits]

Seems like we may as well; it should be a simple check. A few percent of users are still on old Firefox.

[aweary]

Sounds good 👍 after launch it would be great if we could address #9301 so there's less ambiguity around what we should/shouldn't polyfill.

[nhunzaker]

It's been almost a year. The new Firefox ESR is 60, and the old one is 52. Is this still worth doing?

[sophiebits]

Probably not worth it if all current browsers are fine.