fix(upload): fix order of events (#847)

Author: ph-fritsche

src/event/behavior/click.ts

@@ -0,0 +1,25 @@
+import {blur, cloneEvent, focus, isElementType, isFocusable} from '../../utils'
+import {dispatchEvent} from '../dispatchEvent'
+import {behavior} from './registry'
+
+behavior.click = (event, target, config) => {
+  const control = target.closest('label')?.control
+  if (control) {
+    return () => {
+      if (isFocusable(control)) {
+        focus(control)
+      }
+      dispatchEvent(config, control, cloneEvent(event))
+    }
+  } else if (isElementType(target, 'input', {type: 'file'})) {
+    return () => {
+      // blur fires when the file selector pops up
+      blur(target)
+
+      target.dispatchEvent(new Event('fileDialog'))
+
+      // focus fires after the file selector has been closed
+      focus(target)
+    }
+  }
+}

src/event/behavior/index.ts

@@ -0,0 +1,4 @@
+import './click'
+
+export {behavior} from './registry'
+export type {BehaviorPlugin} from './registry'

src/event/behavior/registry.ts

@@ -0,0 +1,15 @@
+import {Config} from '../../setup'
+import {EventType} from '../types'
+
+export interface BehaviorPlugin<Type extends EventType> {
+  (
+    event: DocumentEventMap[Type],
+    target: Element,
+    config: Config,
+  ): // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
+  void | (() => void)
+}
+
+export const behavior: {
+  [Type in EventType]?: BehaviorPlugin<Type>
+} = {}

src/event/dispatchEvent.ts

@@ -0,0 +1,33 @@
+import {Config} from '../setup'
+import {EventType} from './types'
+import {behavior, BehaviorPlugin} from './behavior'
+
+export function dispatchEvent(config: Config, target: Element, event: Event) {
+  const type = event.type as EventType
+  const behaviorImplementation = (
+    behavior[type] as BehaviorPlugin<EventType> | undefined
+  )?.(event, target, config)
+
+  if (behaviorImplementation) {
+    event.preventDefault()
+    let defaultPrevented = false
+    Object.defineProperty(event, 'defaultPrevented', {
+      get: () => defaultPrevented,
+    })
+    Object.defineProperty(event, 'preventDefault', {
+      value: () => {
+        defaultPrevented = event.cancelable
+      },
+    })
+
+    target.dispatchEvent(event)
+
+    if (!defaultPrevented as boolean) {
+      behaviorImplementation()
+    }
+
+    return !defaultPrevented
+  }
+
+  return target.dispatchEvent(event)
+}

src/event/index.ts

@@ -1,6 +1,7 @@
 import {Config} from '../setup'
 import {getUIEventModifiers} from '../utils'
 import {createEvent, EventTypeInit} from './createEvent'
+import {dispatchEvent} from './dispatchEvent'
 import {isKeyboardEvent, isMouseEvent} from './eventTypes'
 import {EventType, PointerCoords} from './types'
 import {wrapEvent} from './wrapEvent'
@@ -22,7 +23,7 @@ export function dispatchUIEvent<K extends EventType>(
 
   const event = createEvent(type, target, init)
 
-  return wrapEvent(() => target.dispatchEvent(event), target)
+  return wrapEvent(() => dispatchEvent(config, target, event), target)
 }
 
 export function bindDispatchUIEvent(config: Config) {

src/pointer/pointerPress.ts

@@ -6,7 +6,6 @@ import {
   focus,
   isDisabled,
   isElementType,
-  isFocusable,
   setLevelRef,
 } from '../utils'
 import {getUIValue, setUISelection} from '../document'
@@ -231,16 +230,11 @@ function up(
 
       const canClick = pointerType !== 'mouse' || button === 'primary'
       if (canClick && target === pressed.downTarget) {
-        const unpreventedClick = fire('click')
+        fire('click')
 
         if (clickCount === 2) {
           fire('dblclick')
         }
-        if (unpreventedClick) {
-          clickDefaultBehavior({
-            target,
-          })
-        }
       }
     }
   }
@@ -367,10 +361,3 @@ function getTextRange(
         (text.substr(pos).match(/^[^\r\n]*/) as RegExpMatchArray)[0].length,
   ]
 }
-
-function clickDefaultBehavior({target}: {target: Element}) {
-  const control = target.closest('label')?.control
-  if (control && isFocusable(control)) {
-    focus(control)
-  }
-}

src/utility/upload.ts

@@ -1,11 +1,4 @@
-import {
-  blur,
-  createFileList,
-  focus,
-  isDisabled,
-  isElementType,
-  setFiles,
-} from '../utils'
+import {createFileList, isDisabled, isElementType, setFiles} from '../utils'
 import {Config, Instance} from '../setup'
 
 export interface uploadInit {
@@ -28,30 +21,31 @@ export async function upload(
   }
   if (isDisabled(element)) return
 
-  await this.click(element)
-
   const files = (Array.isArray(fileOrFiles) ? fileOrFiles : [fileOrFiles])
     .filter(
       file => !this[Config].applyAccept || isAcceptableFile(file, input.accept),
     )
     .slice(0, input.multiple ? undefined : 1)
 
-  // blur fires when the file selector pops up
-  blur(input)
-  // focus fires when they make their selection
-  focus(input)
+  const fileDialog = () => {
+    // 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
+    }
 
-  // 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
+    setFiles(input, createFileList(files))
+    this.dispatchUIEvent(input, 'input')
+    this.dispatchUIEvent(input, 'change')
   }
 
-  setFiles(input, createFileList(files))
-  this.dispatchUIEvent(input, 'input')
-  this.dispatchUIEvent(input, 'change')
+  input.addEventListener('fileDialog', fileDialog)
+
+  await this.click(element)
+
+  input.removeEventListener('fileDialog', fileDialog)
 }
 
 function isAcceptableFile(file: File, accept: string) {

src/utils/index.ts

@@ -33,6 +33,7 @@ export * from './keyboard/getUIEventModifiers'
 
 export * from './keyDef/readNextDescriptor'
 
+export * from './misc/cloneEvent'
 export * from './misc/eventWrapper'
 export * from './misc/findClosest'
 export * from './misc/getDocumentFromNode'

src/utils/misc/cloneEvent.ts

@@ -0,0 +1,7 @@
+interface EventConstructor<E extends Event> {
+  new (type: string, init: EventInit): E
+}
+
+export function cloneEvent<E extends Event>(event: E) {
+  return new (event.constructor as EventConstructor<E>)(event.type, event)
+}

tests/event/dispatchEvent.ts

@@ -0,0 +1,58 @@
+import {dispatchUIEvent} from '#src/event'
+import {behavior, BehaviorPlugin} from '#src/event/behavior'
+import {createConfig} from '#src/setup/setup'
+import {setup} from '#testHelpers/utils'
+
+jest.mock('#src/event/behavior', () => ({
+  behavior: {
+    click: jest.fn(),
+  },
+}))
+
+const mockPlugin = behavior.click as jest.MockedFunction<
+  BehaviorPlugin<'click'>
+>
+
+afterEach(() => {
+  jest.clearAllMocks()
+})
+
+test('keep default behavior', () => {
+  const {element} = setup(`<input type="checkbox"/>`)
+
+  dispatchUIEvent(createConfig(), element, 'click')
+
+  expect(mockPlugin).toBeCalledTimes(1)
+  expect(element).toBeChecked()
+})
+
+test('replace default behavior', () => {
+  const {element} = setup(`<input type="checkbox"/>`)
+
+  const mockBehavior = jest.fn()
+  mockPlugin.mockImplementationOnce(() => mockBehavior)
+
+  dispatchUIEvent(createConfig(), element, 'click')
+
+  expect(mockPlugin).toBeCalledTimes(1)
+  expect(element).not.toBeChecked()
+  expect(mockBehavior).toBeCalled()
+})
+
+test('prevent replaced default behavior', () => {
+  const {element} = setup(`<input type="checkbox"/>`)
+  element.addEventListener('click', e => {
+    expect(e).toHaveProperty('defaultPrevented', false)
+    e.preventDefault()
+    expect(e).toHaveProperty('defaultPrevented', true)
+  })
+
+  const mockBehavior = jest.fn()
+  mockPlugin.mockImplementationOnce(() => mockBehavior)
+
+  dispatchUIEvent(createConfig(), element, 'click')
+
+  expect(mockPlugin).toBeCalledTimes(1)
+  expect(element).not.toBeChecked()
+  expect(mockBehavior).not.toBeCalled()
+})

tests/utility/upload.ts

@@ -29,12 +29,13 @@ test('change file input', async () => {
     input[value=""] - pointerup
     input[value=""] - mouseup: primary
     input[value=""] - click: primary
+      "{CURSOR}" -> "C:\\\\fakepath\\\\hello.png{CURSOR}C:\\\\fakepath\\\\hello.png"
     input[value=""] - blur
     input[value=""] - focusout
-    input[value=""] - focus
-    input[value=""] - focusin
     input[value="C:\\\\fakepath\\\\hello.png"] - input
     input[value="C:\\\\fakepath\\\\hello.png"] - change
+    input[value="C:\\\\fakepath\\\\hello.png"] - focus
+    input[value="C:\\\\fakepath\\\\hello.png"] - focusin
   `)
 })
 
@@ -63,15 +64,32 @@ test('relay click/upload on label to file input', async () => {
     label[for="element"] - pointerup
     label[for="element"] - mouseup: primary
     label[for="element"] - click: primary
-    input#element[value=""] - click: primary
     input#element[value=""] - focusin
+    input#element[value=""] - click: primary
     input#element[value=""] - focusout
-    input#element[value=""] - focusin
     input#element[value="C:\\\\fakepath\\\\hello.png"] - input
     input#element[value="C:\\\\fakepath\\\\hello.png"] - change
+    input#element[value="C:\\\\fakepath\\\\hello.png"] - focusin
   `)
 })
 
+test('prevent file dialog per click event handler', async () => {
+  const file = new File(['hello'], 'hello.png', {type: 'image/png'})
+
+  const {
+    elements: [label, input],
+    eventWasFired,
+  } = setup<[HTMLLabelElement]>(`
+        <label for="element">Element</label>
+        <input type="file" id="element" />
+    `)
+  input.addEventListener('click', e => e.preventDefault())
+
+  await userEvent.upload(label, file)
+
+  expect(eventWasFired('input')).toBe(false)
+})
+
 test('upload multiple files', async () => {
   const files = [
     new File(['hello'], 'hello.png', {type: 'image/png'}),