fix dropdown regression + test

CHANGELOG.md

@@ -93,4 +93,10 @@
 
     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
+    Issue: https://github.com/plotly/dash-table/issues/67
+
+## RC12 - Dropdown regression fix, border style fix, zoom/resize fix
+
+    Issue: https://github.com/plotly/dash-table/issues/68
+    Issue: https://github.com/plotly/dash-table/issues/73
+    Issue: https://github.com/plotly/dash-table/issues/76

dash_table/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dash-table",
-  "version": "3.0.0rc11",
+  "version": "3.0.0rc12",
   "description": "Dash table",
   "main": "build/index.js",
   "scripts": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dash-table",
-  "version": "3.0.0rc11",
+  "version": "3.0.0rc12",
   "description": "Dash table",
   "main": "build/index.js",
   "scripts": {

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

@@ -240,11 +240,7 @@ export default class Cell extends Component<ICellProps, ICellState> {
 
         const { onChange } = this.props;
 
-        onChange({
-            target: {
-                value: this.state.value
-            }
-        } as any);
+        onChange(this.state.value);
     }
 
     handleChange = (e: any) => {

src/dash-table/components/CellFactory.tsx

@@ -128,7 +128,7 @@ export default class CellFactory {
         }
     }
 
-    private handleChange = (idx: number, i: number, e: any) => {
+    private handleChange = (idx: number, i: number, value: any) => {
         const {
             columns,
             dataframe,
@@ -144,7 +144,7 @@ export default class CellFactory {
 
         const newDataframe = R.set(
             R.lensPath([idx, c.id]),
-            e.target.value,
+            value,
             dataframe
         );
         setProps({

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

@@ -45,11 +45,13 @@ export default class ControlledTable extends Component<ControlledTableProps> {
 
         // Fallback method for paste handling in Chrome
         // when no input element has focused inside the table
+        window.addEventListener('resize', this.handleResize);
         document.addEventListener('paste', this.handlePaste);
         document.addEventListener('mousedown', this.handleClickOutside);
     }
 
     componentWillUnmount() {
+        window.removeEventListener('resize', this.handleResize);
         document.removeEventListener('mousedown', this.handleClickOutside);
         document.removeEventListener('paste', this.handlePaste);
     }
@@ -63,6 +65,28 @@ export default class ControlledTable extends Component<ControlledTableProps> {
     }
 
     componentDidUpdate() {
+        this.handleResize();
+    }
+
+    handleClickOutside = (event: any) => {
+        const $el = this.$el;
+
+        if ($el && !$el.contains(event.target as Node)) {
+            this.props.setProps({ is_focused: false });
+        }
+    }
+
+    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);
+        }
+    }
+
+    handleResize = () => {
         const { r0c0, r0c1, r1c0, r1c1 } = this.refs as { [key: string]: HTMLElement };
 
         // Adjust [fixed columns/fixed rows combo] to fixed rows height
@@ -91,24 +115,6 @@ export default class ControlledTable extends Component<ControlledTableProps> {
         }
     }
 
-    handleClickOutside = (event: any) => {
-        const $el = this.$el;
-
-        if ($el && !$el.contains(event.target as Node)) {
-            this.props.setProps({ is_focused: false });
-        }
-    }
-
-    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);
-        }
-    }
-
     get $el() {
         return document.getElementById(this.props.id) as HTMLElement;
     }

src/dash-table/components/Table/Table.less

@@ -111,7 +111,7 @@
             }
 
             &.focused + td {
-                .inset-shadow(var(--border), 0px, 0px, 0px, -1px);
+                .inset-shadow(var(--border), 0px, 0px, -1px, -1px);
             }
         }
     }

tests/e2e/cypress/integration/edit_cell_test.ts

@@ -7,6 +7,36 @@ describe('edit cell', () => {
         cy.visit('http://localhost:8080');
     });
 
+    it('can edit dropdown', () => {
+        let initialValue: string;
+        let expectedValue: string;
+
+        DashTable.getCell(0, 8).within(() => {
+            cy.get('.Select-value-label').then($valueLabel => {
+                initialValue = $valueLabel[0].innerHTML;
+                cy.log('initial value', initialValue);
+            });
+        });
+
+        DashTable.getCell(0, 8).within(() => cy.get('div.Select').click()).then(() => {
+            DashTable.getCell(0, 8).within(() => {
+                cy.get('.Select-option').then($options => {
+                    const target = Array.from($options).find($option => $option.innerHTML !== initialValue);
+                    if (target) {
+                        cy.wrap(target).click({ force: true });
+
+                        expectedValue = target.innerHTML;
+                        cy.log('expected value', expectedValue);
+                    }
+                });
+            });
+        });
+
+        DashTable.getCell(0, 8).within(() => {
+            cy.get('.Select-value-label').should('have.html', expectedValue);
+        });
+    });
+
     // https://github.com/plotly/dash-table/issues/50
     it('can edit on "enter"', () => {
         DashTable.getCell(0, 3).click();