fix(clipboard): prevent default behavior on paste (#862)

Co-authored-by: Philipp Fritsche <[email protected]>

Author: Gudahtt

src/clipboard/paste.ts

@@ -1,10 +1,5 @@
 import {Config, Instance} from '../setup'
-import {
-  createDataTransfer,
-  isEditable,
-  readDataTransferFromClipboard,
-  input,
-} from '../utils'
+import {createDataTransfer, readDataTransferFromClipboard} from '../utils'
 
 export async function paste(
   this: Instance,
@@ -26,10 +21,6 @@ export async function paste(
   this.dispatchUIEvent(target, 'paste', {
     clipboardData: dataTransfer,
   })
-
-  if (isEditable(target)) {
-    input(this[Config], target, dataTransfer.getData('text'), 'insertFromPaste')
-  }
 }
 
 function getClipboardDataFromString(text: string) {

src/event/behavior/index.ts

@@ -2,6 +2,7 @@ import './click'
 import './keydown'
 import './keypress'
 import './keyup'
+import './paste'
 
 export {behavior} from './registry'
 export type {BehaviorPlugin} from './registry'

src/event/behavior/paste.ts

@@ -0,0 +1,13 @@
+import {input, isEditable} from '../../utils'
+import {behavior} from './registry'
+
+behavior.paste = (event, target, config) => {
+  if (isEditable(target)) {
+    return () => {
+      const insertData = event.clipboardData?.getData('text')
+      if (insertData) {
+        input(config, target, insertData, 'insertFromPaste')
+      }
+    }
+  }
+}

tests/clipboard/paste.ts

@@ -1,5 +1,6 @@
 import userEvent from '#src'
 import {render, setup} from '#testHelpers'
+import {createDataTransfer} from '#src/utils'
 
 test('paste with empty clipboard', async () => {
   const {element, getEvents, user} = setup(`<input/>`)
@@ -11,6 +12,17 @@ test('paste with empty clipboard', async () => {
   expect(getEvents('input')).toHaveLength(0)
 })
 
+test('do not trigger input for paste with file data', async () => {
+  const {getEvents, user} = setup(`<input/>`)
+
+  const f0 = new File(['bar'], 'bar0.txt', {type: 'text/plain'})
+  const dt = createDataTransfer([f0])
+  await user.paste(dt)
+
+  expect(getEvents('paste')).toHaveLength(1)
+  expect(getEvents('input')).toHaveLength(0)
+})
+
 test.each([
   [
     `<input/>`,
@@ -65,6 +77,15 @@ test('does not paste when disabled', async () => {
   )
 })
 
+test('prevent input per paste event handler', async () => {
+  const {element, eventWasFired, user} = setup(`<input />`)
+  element.addEventListener('paste', e => e.preventDefault())
+
+  await user.paste('hi')
+  expect(eventWasFired('paste')).toBe(true)
+  expect(eventWasFired('input')).toBe(false)
+})
+
 test.each(['input', 'textarea'])(
   'should paste text in <%s> up to maxLength if provided',
   async type => {