reset inputHTMLElement to allow duplicate files

UNRELEASED.md

@@ -23,6 +23,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 - Fixed `Checkbox` from losing focus when quickly toggled ([#717](https://github.com/Shopify/polaris-react/pull/717))
 - Fixed the console error in the `PositionedOverlay` test environment ([#758](https://github.com/Shopify/polaris-react/pull/758))
 - Fixed `ResourceList` not rendering a header after initial load (thanks to [@andrewpye](https://github.com/andrewpye) for the [original issue](https://github.com/Shopify/polaris-react/issues/735))
+- Fixed `DropZone` which was unable to add a duplicate file back to back or add a file again once removed [#782](https://github.com/Shopify/polaris-react/pull/782)
 
 ### Documentation
 

src/components/DropZone/DropZone.tsx

@@ -477,6 +477,7 @@ export class DropZone extends React.Component<CombinedProps, State> {
     if (onDropRejected && rejectedFiles.length) {
       onDropRejected(rejectedFiles);
     }
+    (event.target as HTMLInputElement).value = '';
   }
 
   @autobind

src/components/DropZone/tests/DropZone.test.tsx

@@ -5,12 +5,40 @@ import {Label, Labelled, DisplayText, Caption} from 'components';
 import {mountWithAppProvider} from 'test-utilities';
 import DropZone from '../DropZone';
 
+const files = [
+  {
+    name: 'jpeg file',
+    type: 'image/jpeg',
+  },
+  {
+    name: 'svg file',
+    type: 'image/svg',
+  },
+];
+const duplicateFiles = [
+  {
+    name: 'jpegs files',
+    type: 'image/jpeg',
+  },
+  {
+    name: 'svg file',
+    type: 'image/svg',
+  },
+];
+
+function createEvent(name: string, files: any) {
+  const evt = new CustomEvent(name);
+  Object.defineProperty(evt, 'dataTransfer', {
+    enumerable: true,
+    value: {files},
+  });
+  return evt;
+}
+
 describe('<DropZone />', () => {
   let spy: jest.Mock;
-  let files: {}[];
   let acceptedFiles: {}[];
   let rejectedFiles: {}[];
-  let createEvent: any;
   let setBoundingClientRect: any;
   let origGetBoundingClientRect: any;
   const widths = {
@@ -22,12 +50,12 @@ describe('<DropZone />', () => {
 
   const fireEvent = (eventType: string, element: any) => {
     spy.mockReset();
-    const event = createEvent(eventType);
+    const event = createEvent(eventType, files);
     element.getDOMNode().dispatchEvent(event);
   };
 
   const triggerDragEnter = (element: ReactWrapper<any, any>) => {
-    const event = createEvent('dragenter');
+    const event = createEvent('dragenter', files);
     element.getDOMNode().dispatchEvent(event);
     clock.tick(50);
     element.update();
@@ -36,26 +64,10 @@ describe('<DropZone />', () => {
   beforeEach(() => {
     spy = jest.fn();
     clock.mock();
-    files = [
-      {
-        name: 'jpeg file',
-        type: 'image/jpeg',
-      },
-      {
-        name: 'svg file',
-        type: 'image/svg',
-      },
-    ];
+
     acceptedFiles = [files[0]];
     rejectedFiles = [files[1]];
-    createEvent = (name: string) => {
-      const evt = new CustomEvent(name);
-      Object.defineProperty(evt, 'dataTransfer', {
-        enumerable: true,
-        value: {files},
-      });
-      return evt;
-    };
+
     origGetBoundingClientRect = Element.prototype.getBoundingClientRect;
     setBoundingClientRect = (size: keyof typeof widths) => {
       Element.prototype.getBoundingClientRect = jest.fn(() => {
@@ -78,14 +90,25 @@ describe('<DropZone />', () => {
 
   it('calls the onDrop callback when a drop event is fired', () => {
     const dropZone = mountWithAppProvider(<DropZone onDrop={spy} />);
-    const event = createEvent('drop');
+    const event = createEvent('drop', files);
     dropZone.getDOMNode().dispatchEvent(event);
     expect(spy).toBeCalledWith(files, files, []);
   });
 
+  it('calls the onDrop callback when a drop event is fired on document twice when a duplicate file is added consecutively', () => {
+    const dropZone = mountWithAppProvider(<DropZone onDrop={spy} />);
+    const event1 = createEvent('drop', files);
+    dropZone.getDOMNode().dispatchEvent(event1);
+    expect(spy).toBeCalledWith(files, files, []);
+
+    const event2 = createEvent('drop', duplicateFiles);
+    dropZone.getDOMNode().dispatchEvent(event2);
+    expect(spy).toBeCalledWith(duplicateFiles, duplicateFiles, []);
+  });
+
   it('calls the onDrop callback when a drop event is fired on document', () => {
     mountWithAppProvider(<DropZone dropOnPage onDrop={spy} />);
-    const event = createEvent('drop');
+    const event = createEvent('drop', files);
     document.dispatchEvent(event);
     expect(spy).toBeCalledWith(files, files, []);
   });
@@ -94,7 +117,7 @@ describe('<DropZone />', () => {
     const dropZone = mountWithAppProvider(
       <DropZone onDrop={spy} accept="image/jpeg" />,
     );
-    const event = createEvent('drop');
+    const event = createEvent('drop', files);
     dropZone.getDOMNode().dispatchEvent(event);
     expect(spy).toBeCalledWith(files, acceptedFiles, rejectedFiles);
   });
@@ -103,7 +126,7 @@ describe('<DropZone />', () => {
     const dropZone = mountWithAppProvider(
       <DropZone onDropAccepted={spy} accept="image/jpeg" />,
     );
-    const event = createEvent('drop');
+    const event = createEvent('drop', files);
     dropZone.getDOMNode().dispatchEvent(event);
     expect(spy).toBeCalledWith(acceptedFiles);
   });
@@ -112,28 +135,28 @@ describe('<DropZone />', () => {
     const dropZone = mountWithAppProvider(
       <DropZone onDropRejected={spy} accept="image/jpeg" />,
     );
-    const event = createEvent('drop');
+    const event = createEvent('drop', files);
     dropZone.getDOMNode().dispatchEvent(event);
     expect(spy).toBeCalledWith(rejectedFiles);
   });
 
   it('calls the onDragEnter callback when a dragEnter event is fired', () => {
     const dropZone = mountWithAppProvider(<DropZone onDragEnter={spy} />);
-    const event = createEvent('dragenter');
+    const event = createEvent('dragenter', files);
     dropZone.getDOMNode().dispatchEvent(event);
     expect(spy).toBeCalled();
   });
 
   it('calls the onDragOver callback when a dragOver event is fired', () => {
     const dropZone = mountWithAppProvider(<DropZone onDragOver={spy} />);
-    const event = createEvent('dragover');
+    const event = createEvent('dragover', files);
     dropZone.getDOMNode().dispatchEvent(event);
     expect(spy).toBeCalled();
   });
 
   it('calls the onDragLeave callback when a dragLeave event is fired', () => {
     const dropZone = mountWithAppProvider(<DropZone onDragLeave={spy} />);
-    const event = createEvent('dragleave');
+    const event = createEvent('dragleave', files);
     dropZone.getDOMNode().dispatchEvent(event);
     expect(spy).toBeCalled();
   });
@@ -145,7 +168,7 @@ describe('<DropZone />', () => {
     const dropZone = mountWithAppProvider(
       <DropZone onDrop={spy} customValidator={customValidator} />,
     );
-    const event = createEvent('drop');
+    const event = createEvent('drop', files);
     dropZone.getDOMNode().dispatchEvent(event);
     expect(spy).toBeCalledWith(files, acceptedFiles, rejectedFiles);
   });