fix: Wrap open in setTimeout only for IE/Edge. (#578)

Related to #450

Author: FMartinez4

src/index.js

@@ -8,7 +8,8 @@ import {
   allFilesAccepted,
   fileMatchSize,
   onDocumentDragOver,
-  getDataTransferItems
+  getDataTransferItems,
+  isIeOrEdge
 } from './utils'
 import styles from './utils/styles'
 
@@ -222,7 +223,11 @@ class Dropzone extends React.Component {
       // in IE11/Edge the file-browser dialog is blocking, ensure this is behind setTimeout
       // this is so react can handle state changes in the onClick prop above above
       // see: https://github.com/react-dropzone/react-dropzone/issues/450
-      setTimeout(this.open.bind(this), 0)
+      if (isIeOrEdge()) {
+        setTimeout(this.open.bind(this), 0)
+      } else {
+        this.open()
+      }
     }
   }
 

src/utils/index.js

@@ -41,3 +41,15 @@ export function allFilesAccepted(files, accept) {
 export function onDocumentDragOver(evt) {
   evt.preventDefault()
 }
+
+function isIe(userAgent) {
+  return userAgent.indexOf('MSIE') !== -1 || userAgent.indexOf('Trident/') !== -1
+}
+
+function isEdge(userAgent) {
+  return userAgent.indexOf('Edge/') !== -1
+}
+
+export function isIeOrEdge(userAgent = window.navigator.userAgent) {
+  return isIe(userAgent) || isEdge(userAgent)
+}

src/utils/index.spec.js

@@ -1,4 +1,4 @@
-import { getDataTransferItems } from './'
+import { getDataTransferItems, isIeOrEdge } from './'
 
 const files = [
   {
@@ -87,3 +87,32 @@ describe('getDataTransferItems', () => {
     expect(Object.keys(files[2])).toHaveLength(3)
   })
 })
+
+describe('isIeOrEdge', () => {
+  it('should return true for IE10', () => {
+    const userAgent =
+      'Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; WOW64; Trident/6.0; .NET4.0E; .NET4.0C; .NET CLR 3.5.30729; .NET CLR 2.0.50727; .NET CLR 3.0.30729)'
+
+    expect(isIeOrEdge(userAgent)).toBe(true)
+  })
+
+  it('should return true for IE11', () => {
+    const userAgent =
+      'Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; rv:11.0) like Gecko'
+    expect(isIeOrEdge(userAgent)).toBe(true)
+  })
+
+  it('should return true for Edge', () => {
+    const userAgent =
+      'Mozilla/5.0 (Windows NT 10.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 Edge/16.16258'
+
+    expect(isIeOrEdge(userAgent)).toBe(true)
+  })
+
+  it('should return false for Chrome', () => {
+    const userAgent =
+      'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.186 Safari/537.36'
+
+    expect(isIeOrEdge(userAgent)).toBe(false)
+  })
+})