fix(clipboard): prevent default behavior on copy/cut (#866)

Author: ph-fritsche

src/clipboard/copy.ts

@@ -11,11 +11,12 @@ export async function copy(this: Instance) {
     return
   }
 
-  this.dispatchUIEvent(target, 'copy', {
-    clipboardData,
-  })
-
-  if (this[Config].writeToClipboard) {
+  if (
+    this.dispatchUIEvent(target, 'copy', {
+      clipboardData,
+    }) &&
+    this[Config].writeToClipboard
+  ) {
     await writeDataTransferToClipboard(doc, clipboardData)
   }
 

src/clipboard/cut.ts

@@ -1,10 +1,5 @@
 import {Config, Instance} from '../setup'
-import {
-  copySelection,
-  input,
-  isEditable,
-  writeDataTransferToClipboard,
-} from '../utils'
+import {copySelection, writeDataTransferToClipboard} from '../utils'
 
 export async function cut(this: Instance) {
   const doc = this[Config].document
@@ -16,16 +11,13 @@ export async function cut(this: Instance) {
     return
   }
 
-  this.dispatchUIEvent(target, 'cut', {
-    clipboardData,
-  })
-
-  if (isEditable(target)) {
-    input(this[Config], target, '', 'deleteByCut')
-  }
-
-  if (this[Config].writeToClipboard) {
-    await writeDataTransferToClipboard(doc, clipboardData)
+  if (
+    this.dispatchUIEvent(target, 'cut', {
+      clipboardData,
+    }) &&
+    this[Config].writeToClipboard
+  ) {
+    await writeDataTransferToClipboard(target.ownerDocument, clipboardData)
   }
 
   return clipboardData

src/event/behavior/cut.ts

@@ -0,0 +1,10 @@
+import {input, isEditable} from '../../utils'
+import {behavior} from './registry'
+
+behavior.cut = (event, target, config) => {
+  return () => {
+    if (isEditable(target)) {
+      input(config, target, '', 'deleteByCut')
+    }
+  }
+}

src/event/behavior/index.ts

@@ -1,4 +1,5 @@
 import './click'
+import './cut'
 import './keydown'
 import './keypress'
 import './keyup'

tests/_helpers/listeners.ts

@@ -93,7 +93,7 @@ export function addListeners(
     eventHandlerCalls = []
   }
 
-  function eventWasFired(eventType: keyof GlobalEventHandlersEventMap) {
+  function eventWasFired(eventType: keyof DocumentEventMap) {
     return getEvents(eventType).length > 0
   }
 

tests/clipboard/copy.ts

@@ -53,6 +53,22 @@ test('copy on empty selection does nothing', async () => {
   expect(getEvents()).toHaveLength(0)
 })
 
+test('prevent default behavior per event handler', async () => {
+  const {element, eventWasFired, getEvents, user} = setup(
+    `<input value="bar"/>`,
+    {
+      selection: {anchorOffset: 0, focusOffset: 3},
+    },
+  )
+  element.addEventListener('copy', e => e.preventDefault())
+  await window.navigator.clipboard.writeText('foo')
+
+  await user.copy()
+  expect(eventWasFired('copy')).toBe(true)
+  expect(getEvents('copy')[0].clipboardData?.getData('text')).toBe('bar')
+  await expect(window.navigator.clipboard.readText()).resolves.toBe('foo')
+})
+
 describe('without Clipboard API', () => {
   beforeEach(() => {
     Object.defineProperty(window.navigator, 'clipboard', {

tests/clipboard/cut.ts

@@ -60,6 +60,23 @@ test('cut on empty selection does nothing', async () => {
   expect(getEvents()).toHaveLength(0)
 })
 
+test('prevent default behavior per event handler', async () => {
+  const {element, eventWasFired, getEvents, user} = setup(
+    `<input value="bar"/>`,
+    {
+      selection: {anchorOffset: 0, focusOffset: 3},
+    },
+  )
+  element.addEventListener('cut', e => e.preventDefault())
+  await window.navigator.clipboard.writeText('foo')
+
+  await user.cut()
+  expect(eventWasFired('cut')).toBe(true)
+  expect(getEvents('cut')[0].clipboardData?.getData('text')).toBe('bar')
+  expect(eventWasFired('input')).toBe(false)
+  await expect(window.navigator.clipboard.readText()).resolves.toBe('foo')
+})
+
 describe('without Clipboard API', () => {
   beforeEach(() => {
     Object.defineProperty(window.navigator, 'clipboard', {

tests/event/behavior/keypress.ts

@@ -44,7 +44,8 @@ cases(
     expect(getEvents('input')[0]).toHaveProperty('inputType', inputType)
     if (expectedValue !== undefined) {
       expect(element).toHaveValue(expectedValue)
-    } else if (expectedHtml !== undefined) {
+    }
+    if (expectedHtml !== undefined) {
       expect(element).toHaveProperty('innerHTML', expectedHtml)
     }
   },