fix: Support experimental copy & paste in IE 11 (#349)

* #349 Ignore cut, copy and paste events that do not support clipboardData

* #349 Added hint about missing support for IE to example

demo/src/examples/ExperimentalCutCopyPaste.js

@@ -25,6 +25,7 @@ function ExperimentalCutCopyPaste({ data }) {
         In order to activate this functionality you need to set the
         EXPERIMENTAL__cutCopyPaste flag on a MentionsInput to true .
       </p>
+      <p>This functionality is not supported in Internet Explorer.</p>
 
       <div style={{ display: 'flex' }}>
         <div style={{ flex: 1, paddingRight: 8 }}>

src/MentionsInput.js

@@ -324,6 +324,9 @@ class MentionsInput extends React.Component {
     if (event.target !== this.inputRef) {
       return
     }
+    if (!this.supportsClipboardActions(event)) {
+      return
+    }
 
     event.preventDefault()
 
@@ -385,10 +388,17 @@ class MentionsInput extends React.Component {
     )
   }
 
+  supportsClipboardActions(event) {
+    return !!event.clipboardData
+  }
+
   handleCopy(event) {
     if (event.target !== this.inputRef) {
       return
     }
+    if (!this.supportsClipboardActions(event)) {
+      return
+    }
 
     event.preventDefault()
 
@@ -399,6 +409,9 @@ class MentionsInput extends React.Component {
     if (event.target !== this.inputRef) {
       return
     }
+    if (!this.supportsClipboardActions(event)) {
+      return
+    }
 
     event.preventDefault()
 

src/MentionsInput.spec.js

@@ -281,6 +281,30 @@ describe('MentionsInput', () => {
       }
     )
 
+    it.each(['cut', 'copy'])(
+      'should fallback to the browsers behaviour if the "%s" event does not support clipboardData',
+      eventType => {
+        // IE 11 has no clipboardData attached to the event and only supports mime type "text"
+        // therefore, the new mechanism should ignore those events and let the browser handle them
+        const textarea = component.find('textarea')
+
+        const selectionStart = plainTextValue.indexOf('First') + 2
+        const selectionEnd = plainTextValue.length
+
+        textarea.simulate('select', {
+          target: { selectionStart, selectionEnd },
+        })
+
+        const preventDefault = jest.fn()
+        const event = new Event(eventType, { bubbles: true })
+        event.preventDefault = preventDefault
+
+        textarea.getDOMNode().dispatchEvent(event)
+
+        expect(preventDefault).not.toHaveBeenCalled()
+      }
+    )
+
     it('should remove a leading mention from the value when the text is cut.', () => {
       const onChange = jest.fn()
 
@@ -392,5 +416,26 @@ describe('MentionsInput', () => {
       expect(newValue).toMatchSnapshot()
       expect(newPlainTextValue).toMatchSnapshot()
     })
+
+    it('should fallback to the browsers behaviour if the "paste" event does not support clipboardData', () => {
+      // IE 11 has no clipboardData attached to the event and only supports mime type "text"
+      // therefore, the new mechanism should ignore those events and let the browser handle them
+      const textarea = component.find('textarea')
+
+      const selectionStart = plainTextValue.indexOf('First') + 2
+      const selectionEnd = plainTextValue.length
+
+      textarea.simulate('select', {
+        target: { selectionStart, selectionEnd },
+      })
+
+      const preventDefault = jest.fn()
+      const event = new Event('paste', { bubbles: true })
+      event.preventDefault = preventDefault
+
+      textarea.getDOMNode().dispatchEvent(event)
+
+      expect(preventDefault).not.toHaveBeenCalled()
+    })
   })
 })