Merge pull request #1789 from akksi/fix/data-table-area-selection

Author: jackparmer

components/dash-table/src/dash-table/components/ControlledTable/index.tsx

@@ -127,6 +127,7 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
         window.addEventListener('resize', this.forceHandleResize);
         document.addEventListener('mousedown', this.handleClick);
         document.addEventListener('paste', this.handlePaste);
+        document.addEventListener('copy', this.handleCopy);
 
         const {active_cell, selected_cells, setProps} = this.props;
 
@@ -146,6 +147,7 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
         window.removeEventListener('resize', this.forceHandleResize);
         document.removeEventListener('mousedown', this.handleClick);
         document.removeEventListener('paste', this.handlePaste);
+        document.removeEventListener('copy', this.handleCopy);
     }
 
     componentDidUpdate() {
@@ -242,16 +244,23 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
         }
     };
 
-    handlePaste = (event: any) => {
-        // no need to check for target as this will only be called if
-        // a child fails to handle the paste event (e.g table, table input)
-        // make sure the active element is in the scope of the component
-        const $el = this.$el;
-        if ($el && $el.contains(document.activeElement)) {
-            this.onPaste(event);
+    handleClipboardEvent = (
+        event: ClipboardEvent,
+        handler: (e: ClipboardEvent) => void
+    ) => {
+        if (this.containsActiveElement()) {
+            handler(event);
         }
     };
 
+    handleCopy = (event: ClipboardEvent) => {
+        this.handleClipboardEvent(event, this.onCopy);
+    };
+
+    handlePaste = (event: ClipboardEvent) => {
+        this.handleClipboardEvent(event, this.onPaste);
+    };
+
     private clearCellWidth(cell: HTMLElement) {
         cell.style.width = '';
         cell.style.minWidth = '';
@@ -978,7 +987,6 @@ export default class ControlledTable extends PureComponent<ControlledTableProps>
             <div
                 id={id}
                 className='dash-table-container'
-                onCopy={this.onCopy}
                 onKeyDown={this.handleKeyDown}
                 onPaste={this.onPaste}
                 style={{position: 'relative'}}

components/dash-table/tests/selenium/test_basic_copy_paste.py

@@ -278,3 +278,26 @@ def test_tbcp008_copy_paste_between_tables_with_hidden_columns(test):
             )
 
     assert test.get_log_errors() == []
+
+
+def test_tbcp009_copy_9_and_10_click(test):
+    test.start_server(get_app())
+
+    source = test.table("table")
+    target = test.table("table2")
+
+    source.cell(9, 0).click()
+    with test.hold(Keys.SHIFT):
+        source.cell(10, 0).click()
+
+    test.copy()
+    target.cell(0, 0).click()
+    test.paste()
+
+    for row in range(2):
+        for col in range(1):
+            assert (
+                target.cell(row, col).get_text() == source.cell(row + 9, col).get_text()
+            )
+
+    assert test.get_log_errors() == []