diff --git a/CHANGELOG.md b/CHANGELOG.md index 1b48d004e..c515d212d 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/src/dash-table/components/Table/index.tsx b/src/dash-table/components/Table/index.tsx index c04e47950..86d0a76fd 100644 --- a/src/dash-table/components/Table/index.tsx +++ b/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 { constructor(props: SanitizedAndDerivedProps) { @@ -94,10 +92,7 @@ export default class Table extends Component - !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 R.any( + key => !DERIVED_REGEX.test(key) && props[key] !== nextProps[key], + R.keysIn({ ...props, ...nextProps }) +) || !isEqual(state, nextState); \ No newline at end of file diff --git a/tests/cypress/tests/unit/table_update_test.ts b/tests/cypress/tests/unit/table_update_test.ts new file mode 100644 index 000000000..34de59fb5 --- /dev/null +++ b/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 })); + }); +}); diff --git a/tests/integration/review_app/test_app_df_graph.py b/tests/integration/review_app/test_app_df_graph.py index 60dfecd9a..d2c1a3ecf 100644 --- a/tests/integration/review_app/test_app_df_graph.py +++ b/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")