<p dir="auto"><code class="notranslate">event.dataTransfer.types.contains(...)</code> is broken in Chrome.</p>
<p dir="auto">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:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="onDragOver: function (event) {
    if (event.dataTransfer.types.indexOf('application/x-custom-type') &gt; -1) {
        event.preventDefault();
    }
}"><pre class="notranslate">onDragOver: <span class="pl-k">function</span> <span class="pl-kos">(</span><span class="pl-s1">event</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">event</span><span class="pl-kos">.</span><span class="pl-c1">dataTransfer</span><span class="pl-kos">.</span><span class="pl-c1">types</span><span class="pl-kos">.</span><span class="pl-en">indexOf</span><span class="pl-kos">(</span><span class="pl-s">'application/x-custom-type'</span><span class="pl-kos">)</span> <span class="pl-c1">&gt;</span> <span class="pl-c1">-</span><span class="pl-c1">1</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-s1">event</span><span class="pl-kos">.</span><span class="pl-en">preventDefault</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">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 <code class="notranslate">indexOf</code> method. According to the latest drafts of the HTML5 specification (<a href="http://www.w3.org/html/wg/drafts/html/master/editing.html#the-datatransfer-interface" rel="nofollow">W3C</a>, <a href="https://html.spec.whatwg.org/multipage/interaction.html#dom-datatransfer-types" rel="nofollow">WHATWG</a>), returning an array like Webkit does is correct. Obviously, the fix is easy on my side (check which one of <code class="notranslate">indexOf</code> and <code class="notranslate">contains</code> 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.</p>
<p dir="auto">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.</p>