fix(upload): fire input event when files change (#575)

src/__tests__/upload.js

@@ -192,10 +192,30 @@ test.each([
   },
 )
 
-test('should not trigger input event for empty list', () => {
-  const {element, eventWasFired} = setup('<input type="file"/>')
-  userEvent.upload(element, [])
+test('should not trigger input event when selected files are the same', () => {
+  const {element, eventWasFired, clearEventCalls} = setup(
+    '<input type="file" multiple/>',
+  )
+  const files = [
+    new File(['hello'], 'hello.png', {type: 'image/png'}),
+    new File(['there'], 'there.png', {type: 'image/png'}),
+  ]
 
+  userEvent.upload(element, [])
+  expect(eventWasFired('input')).toBe(false)
   expect(element.files).toHaveLength(0)
+
+  userEvent.upload(element, files)
+  expect(eventWasFired('input')).toBe(true)
+  expect(element.files).toHaveLength(2)
+
+  clearEventCalls()
+
+  userEvent.upload(element, files)
   expect(eventWasFired('input')).toBe(false)
+  expect(element.files).toHaveLength(2)
+
+  userEvent.upload(element, [])
+  expect(eventWasFired('input')).toBe(true)
+  expect(element.files).toHaveLength(0)
 })

src/upload.js

@@ -19,8 +19,11 @@ function upload(element, fileOrFiles, init, {applyAccept = false} = {}) {
   // focus fires when they make their selection
   focus(element, init)
 
-  // treat empty array as if the user just closed the file upload dialog
-  if (files.length === 0) {
+  // do not fire an input event if the file selection does not change
+  if (
+    files.length === input.files.length &&
+    files.every((f, i) => f === input.files.item(i))
+  ) {
     return
   }