fix regression + basic test

.circleci/config.yml

@@ -42,7 +42,7 @@ jobs:
 
             - run:
                 name: Run build:js
-                command: npm run build:js
+                command: npm run build:js-test
 
             - run:
                 name: Run build:py

.config/webpack/base.js

@@ -0,0 +1,73 @@
+
+const path = require('path');
+const packagejson = require('./../../package.json');
+
+const dashLibraryName = packagejson.name.replace(/-/g, '_');
+
+module.exports = (preprocessor = {}, mode = 'development') => {
+    console.log('********** Webpack Environment Overrides **********');
+    console.log('Preprocessor', JSON.stringify(preprocessor));
+    console.log('mode', mode);
+
+    return {
+        entry: {
+            bundle: './src/dash-table/index.ts',
+            demo: ['./demo/index.js', './demo/index.html'],
+        },
+        mode: mode,
+        output: {
+            path: path.resolve(__dirname, './../..', dashLibraryName),
+            filename: '[name].js',
+            library: dashLibraryName,
+            libraryTarget: 'window',
+        },
+        externals: {
+            react: 'React',
+            'react-dom': 'ReactDOM',
+            'plotly.js': 'Plotly',
+        },
+        module: {
+            rules: [
+                {
+                    test: /demo[/]index.html?$/,
+                    loader: 'file-loader?name=index.[ext]'
+                },
+                {
+                    test: /\.ts(x?)$/,
+                    exclude: /node_modules/,
+                    loader: `babel-loader!ts-loader!webpack-preprocessor?${JSON.stringify(preprocessor)}`
+                },
+                {
+                    test: /\.js$/,
+                    exclude: /node_modules/,
+                    loader: `babel-loader!webpack-preprocessor?${JSON.stringify(preprocessor)}`
+
+                },
+                {
+                    test: /\.css$/,
+                    use: [
+                        { loader: 'style-loader' },
+                        { loader: 'css-loader' }
+                    ],
+                },
+                {
+                    test: /\.less$/,
+                    use: [
+                        { loader: 'style-loader' },
+                        { loader: 'css-loader' },
+                        { loader: 'less-loader' }
+                    ],
+                },
+            ],
+        },
+        resolve: {
+            alias: {
+                'cypress': path.resolve('./tests/e2e/cypress/src'),
+                'dash-table': path.resolve('./src/dash-table'),
+                'core': path.resolve('./src/core'),
+                'tests': path.resolve('./tests')
+            },
+            extensions: ['.js', '.ts', '.tsx']
+        }
+    };
+};

@Types/modules.d.ts

@@ -1,4 +1,9 @@
 declare module 'sheetclip' {
-    const value: any;
+    const value: {
+        prototype: {
+            parse: (text: string) => string[][];
+        }
+    };
+
     export default value;
 }

CHANGELOG.md

@@ -85,4 +85,12 @@
 
     Default value is False.
 
-## RC10 - Fix double click regression
+## RC10 - Fix double click regression
+
+    Issue: https://github.com/plotly/dash-table/issues/62
+
+## RC11 - Fix copy/paste regression, fix delete regression, fix click/blur regression
+
+    Issue: https://github.com/plotly/dash-table/issues/64
+    Issue: https://github.com/plotly/dash-table/issues/65
+    Issue: https://github.com/plotly/dash-table/issues/67

dash_table/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dash-table",
-  "version": "3.0.0rc10",
+  "version": "3.0.0rc11",
   "description": "Dash table",
   "main": "build/index.js",
   "scripts": {
@@ -20,12 +20,13 @@
     "private::test-e2e": "run-p --race private::host* private::runtests",
     "private::test-visual": "build-storybook && percy-storybook",
     "build.watch": "webpack-dev-server --content-base dash_table --mode development",
-    "build:js-dev": "run-s \"private::build -- --mode development\"",
     "build:js": "run-s \"private::build -- --mode production\"",
+    "build:js-dev": "run-s \"private::build -- --mode development\"",
+    "build:js-test": "webpack --display-reasons --bail --config webpack.test.config.js",
     "build:py": "./extract-meta src/dash-table/Table.js > dash_table/metadata.json && cp package.json dash_table",
     "lint": "run-s private::lint.js private::lint.ts",
     "test": "run-s private::test-*",
-    "test.watch": "run-p --race \"private::build -- --mode development --watch\" --race private::host* private::opentests"
+    "test.watch": "run-p --race \"build:js-test -- --watch\" --race private::host* private::opentests"
   },
   "author": "Chris P <chris@plot.ly",
   "license": "MIT",
@@ -69,7 +70,8 @@
     "wait-on": "^2.1.0",
     "webpack": "^4.8.3",
     "webpack-cli": "^2.1.3",
-    "webpack-dev-server": "^3.1.5"
+    "webpack-dev-server": "^3.1.5",
+    "webpack-preprocessor": "^0.1.11"
   },
   "peerDependencies": {
     "react": ">=0.14",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dash-table",
-  "version": "3.0.0rc10",
+  "version": "3.0.0rc11",
   "description": "Dash table",
   "main": "build/index.js",
   "scripts": {
@@ -20,12 +20,13 @@
     "private::test-e2e": "run-p --race private::host* private::runtests",
     "private::test-visual": "build-storybook && percy-storybook",
     "build.watch": "webpack-dev-server --content-base dash_table --mode development",
-    "build:js-dev": "run-s \"private::build -- --mode development\"",
     "build:js": "run-s \"private::build -- --mode production\"",
+    "build:js-dev": "run-s \"private::build -- --mode development\"",
+    "build:js-test": "webpack --display-reasons --bail --config webpack.test.config.js",
     "build:py": "./extract-meta src/dash-table/Table.js > dash_table/metadata.json && cp package.json dash_table",
     "lint": "run-s private::lint.js private::lint.ts",
     "test": "run-s private::test-*",
-    "test.watch": "run-p --race \"private::build -- --mode development --watch\" --race private::host* private::opentests"
+    "test.watch": "run-p --race \"build:js-test -- --watch\" --race private::host* private::opentests"
   },
   "author": "Chris P <chris@plot.ly",
   "license": "MIT",
@@ -69,7 +70,8 @@
     "wait-on": "^2.1.0",
     "webpack": "^4.8.3",
     "webpack-cli": "^2.1.3",
-    "webpack-dev-server": "^3.1.5"
+    "webpack-dev-server": "^3.1.5",
+    "webpack-preprocessor": "^0.1.11"
   },
   "peerDependencies": {
     "react": ">=0.14",

src/core/Clipboard.ts

@@ -1,5 +1,13 @@
 export default class Clipboard {
+    /*#if TEST_COPY_PASTE*/
+    private static value: string;
+    /*#endif*/
+
     public static set(value: string): void {
+        /*#if TEST_COPY_PASTE*/
+        Clipboard.value = value;
+        /*#endif*/
+
         const el = document.createElement('textarea');
         el.value = value;
 
@@ -34,9 +42,17 @@ export default class Clipboard {
         }
     }
 
-    public static get(ev: ClipboardEvent) {
-        return ev.clipboardData ?
-            ev.clipboardData.getData('text/plain') :
+    public static get(_ev: ClipboardEvent) {
+        let value;
+
+        /*#if TEST_COPY_PASTE*/
+        value = Clipboard.value;
+        /*#else*/
+        value = _ev.clipboardData ?
+            _ev.clipboardData.getData('text/plain') :
             undefined;
+        /*#endif*/
+
+        return value;
     }
 }

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

@@ -126,12 +126,13 @@ export default class Cell extends Component<ICellProps, ICellState> {
             onDoubleClick: onDoubleClick
         };
 
-        return !active ?
+        return (!active && this.state.value === this.props.value) ?
             this.renderValue(attributes) :
             (<input
                 ref='textInput'
                 type='text'
                 value={this.state.value}
+                onBlur={this.propagateChange}
                 onChange={this.handleChange}
                 onKeyDown={this.handleKeyDown}
                 onPaste={this.onPaste}
@@ -232,12 +233,8 @@ export default class Cell extends Component<ICellProps, ICellState> {
         </td>);
     }
 
-    handleChange = (e: any) => {
-        this.setState({ value: e.target.value });
-    }
-
-    handleKeyDown = (e: KeyboardEvent) => {
-        if (e.keyCode !== KEY_CODES.ENTER) {
+    propagateChange = () => {
+        if (this.state.value === this.props.value) {
             return;
         }
 
@@ -250,6 +247,18 @@ export default class Cell extends Component<ICellProps, ICellState> {
         } as any);
     }
 
+    handleChange = (e: any) => {
+        this.setState({ value: e.target.value });
+    }
+
+    handleKeyDown = (e: KeyboardEvent) => {
+        if (e.keyCode !== KEY_CODES.ENTER) {
+            return;
+        }
+
+        this.propagateChange();
+    }
+
     handleOpenDropdown = () => {
         const { dropdown, td }: { [key: string]: any } = this.refs;
 
@@ -287,7 +296,7 @@ export default class Cell extends Component<ICellProps, ICellState> {
     }
 
     componentDidUpdate() {
-        const { active, onChange, value } = this.propsWithDefaults;
+        const { active } = this.propsWithDefaults;
 
         if (active && this.refs.textInput) {
             (this.refs.textInput as HTMLElement).focus();
@@ -296,14 +305,6 @@ export default class Cell extends Component<ICellProps, ICellState> {
         if (active && this.refs.dropdown) {
             (this.refs.td as HTMLElement).focus();
         }
-
-        if (!active && this.state.value !== value) {
-            onChange({
-                target: {
-                    value: this.state.value
-                }
-            } as any);
-        }
     }
 
     shouldComponentUpdate(nextProps: ICellPropsWithDefaults, nextState: ICellState) {