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

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)
  }
  },