Re-render on changes to undefined props (#785)

Author: Marc-Andre-Rivet

CHANGELOG.md

@@ -11,6 +11,9 @@ This project adheres to [Semantic Versioning](http://semver.org/).
     - Clicking on a link in a Markdown cell now requires a single click instead of two
     - Links in Markdown cells now open a new tab (target="_blank")
 
+### Fixed
+- [#785](https://github.com/plotly/dash-table/pull/785) Fix a bug where the table does not refresh correctly if a property was previously missing
+
 ## [4.7.0] - 2020-05-05
 ### Added
 - [#729](https://github.com/plotly/dash-table/pull/729) Improve conditional styling

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

@@ -20,15 +20,13 @@ import 'react-select/dist/react-select.css';
 import './Table.less';
 import './style';
 import './Dropdown.css';
-import { isEqual } from 'core/comparer';
 import { SingleColumnSyntaxTree } from 'dash-table/syntax-tree';
 import derivedFilterMap from 'dash-table/derived/filter/map';
 
 import controlledPropsHelper from './controlledPropsHelper';
 import derivedPropsHelper from './derivedPropsHelper';
 import DOM from 'core/browser/DOM';
-
-const DERIVED_REGEX = /^derived_/;
+import shouldComponentUpdate from './shouldComponentUpdate';
 
 export default class Table extends Component<SanitizedAndDerivedProps, StandaloneState> {
     constructor(props: SanitizedAndDerivedProps) {
@@ -94,10 +92,7 @@ export default class Table extends Component<SanitizedAndDerivedProps, Standalon
         const props: any = this.props;
         const state: any = this.state;
 
-        return R.any(key =>
-            !DERIVED_REGEX.test(key) && props[key] !== nextProps[key],
-            R.keysIn(props)
-        ) || !isEqual(state, nextState);
+        return shouldComponentUpdate(props, nextProps, state, nextState);
     }
 
     render() {
@@ -159,3 +154,4 @@ export default class Table extends Component<SanitizedAndDerivedProps, Standalon
     private readonly controlledPropsHelper = controlledPropsHelper();
     private readonly updateDerivedProps = derivedPropsHelper();
 }
+

src/dash-table/components/Table/shouldComponentUpdate.ts

@@ -0,0 +1,14 @@
+import * as R from 'ramda';
+import { isEqual } from 'core/comparer';
+
+const DERIVED_REGEX = /^derived_/;
+
+export default (
+    props: any,
+    nextProps: any,
+    state: any,
+    nextState: any
+) => R.any(
+    key => !DERIVED_REGEX.test(key) && props[key] !== nextProps[key],
+    R.keysIn({ ...props, ...nextProps })
+) || !isEqual(state, nextState);

tests/cypress/tests/unit/table_update_test.ts

@@ -0,0 +1,27 @@
+import shouldComponentUpdate from 'dash-table/components/Table/shouldComponentUpdate';
+
+describe('shouldComponentUpdate', () => {
+    it('should update on undefined -> defined props', () => {
+        assert(shouldComponentUpdate({}, { a: 0 }, {}, {}));
+    });
+
+    it('should update on undefined -> defined state', () => {
+        assert(shouldComponentUpdate({}, {}, {}, { a: 0 }));
+    });
+
+    it('should update on defined -> undefined props', () => {
+        assert(shouldComponentUpdate({ a: 0 }, {}, {}, {}));
+    });
+
+    it('should update on defined -> undefined state', () => {
+        assert(shouldComponentUpdate({}, {}, { a: 0 }, {}));
+    });
+
+    it('should not update on derived props', () => {
+        assert(!shouldComponentUpdate({ derived_test: 0 }, { derived_test: 1 }, {}, {}));
+    });
+
+    it('should update on derived state', () => {
+        assert(shouldComponentUpdate({}, {}, { derived_test: 0 }, { derived_test: 1 }));
+    });
+});

tests/integration/review_app/test_app_df_graph.py

@@ -152,5 +152,8 @@ def update_graph(rows, selected_rows):
     dash_duo.wait_for_element("#waitfor")
 
     dash_duo.wait_for_element("#{}".format(IDS["table"]))
+    dash_duo.wait_for_element("#pop svg")
+    dash_duo.wait_for_element("#lifeExp svg")
+    dash_duo.wait_for_element("#gdpPercap svg")
 
     dash_duo.percy_snapshot("rapp002 - loaded")