Use new @plotly/dash-component-plugins to handle location path changes (#743)

Author: Marc-Andre-Rivet

CHANGELOG.md

@@ -4,6 +4,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Unreleased]
 ### Changed
+- [#743](https://github.com/plotly/dash-core-components/pull/743) Location component now emits an event on link update
 - [#739](https://github.com/plotly/dash-core-components/pull/739) Async Slider and RangeSlider
 - [#729](https://github.com/plotly/dash-core-components/pull/729) Handle case where dcc fails to load when used inside an iframe with a sandbox attribute that only has allow-scripts
 

package-lock.json

@@ -59,7 +59,7 @@
     "@babel/plugin-syntax-dynamic-import": "^7.2.0",
     "@babel/preset-env": "^7.4.1",
     "@babel/preset-react": "^7.0.0",
-    "@plotly/dash-component-plugins": "^1.0.2",
+    "@plotly/dash-component-plugins": "^1.1.0",
     "@plotly/webpack-dash-dynamic-import": "^1.1.4",
     "babel-eslint": "^10.0.1",
     "babel-jest": "^24.5.0",

package.json

@@ -47,7 +47,7 @@ export default class Link extends Component {
             window.location.pathname = href;
         } else {
             window.history.pushState({}, '', href);
-            window.dispatchEvent(new CustomEvent('onpushstate'));
+            window.dispatchEvent(new CustomEvent('_dashprivate_pushstate'));
         }
         // scroll back to top
         window.scrollTo(0, 0);

src/components/Link.react.js

@@ -1,6 +1,8 @@
 import {Component} from 'react';
 import PropTypes from 'prop-types';
 import {type} from 'ramda';
+
+import {History} from '@plotly/dash-component-plugins';
 /* global window:true */
 
 /**
@@ -11,6 +13,7 @@ export default class Location extends Component {
     constructor(props) {
         super(props);
         this.updateLocation = this.updateLocation.bind(this);
+        this.onLocationChange = this.onLocationChange.bind(this);
     }
 
     updateLocation(props) {
@@ -81,23 +84,25 @@ export default class Location extends Component {
         }
     }
 
+    onLocationChange() {
+        const {setProps} = this.props;
+        setProps({
+            pathname: window.location.pathname,
+            href: window.location.href,
+            hash: window.location.hash,
+            search: window.location.search,
+        });
+
+        History.dispatchChangeEvent();
+    }
+
     componentDidMount() {
-        const listener = () => {
-            return () => {
-                const {setProps} = this.props;
-                setProps({
-                    pathname: window.location.pathname,
-                    href: window.location.href,
-                    hash: window.location.hash,
-                    search: window.location.search,
-                });
-            };
-        };
-        window.addEventListener('onpopstate', listener());
-        window.onpopstate = listener('POP');
+        window.onpopstate = this.onLocationChange;
 
-        // non-standard, emitted by Link.react
-        window.addEventListener('onpushstate', listener());
+        window.addEventListener(
+            '_dashprivate_pushstate',
+            this.onLocationChange
+        );
         this.updateLocation(this.props);
     }
 

src/components/Location.react.js

@@ -0,0 +1,61 @@
+import time
+from multiprocessing import Value
+import dash
+from dash.dependencies import Input, Output, State
+import dash.testing.wait as wait
+import dash_core_components as dcc
+import dash_html_components as html
+
+
+def test_link001_event(dash_dcc):
+    app = dash.Dash(__name__)
+    app.layout = html.Div(
+        [
+            dcc.Link("Page 1", id="link1", href="/page-1"),
+            dcc.Location(id="url", refresh=False),
+            html.Div(id='content'),
+        ]
+    )
+
+    @app.callback(Output("content", "children"), [Input("url", "pathname")])
+    def display_page(pathname):
+        if pathname is None or pathname == "/page-1":
+            return html.Div("1", id="div1")
+        elif pathname == "/":
+            return html.Div("base", id="div0")
+        else:
+            return "404"
+
+    dash_dcc.start_server(app)
+    dash_dcc.driver.execute_script(
+        '''
+        window.addEventListener('_dashprivate_pushstate', function() {
+            window._test_link_event_counter = (window._test_link_event_counter || 0) + 1;
+        });
+
+        window.addEventListener('_dashprivate_historychange', function() {
+            window._test_history_event_counter = (window._test_history_event_counter || 0) + 1;
+        });
+    '''
+    )
+
+    dash_dcc.wait_for_element_by_id("div0")
+
+    dash_dcc.find_element('#link1').click()
+
+    dash_dcc.wait_for_element_by_id("div1")
+
+    link_counter = dash_dcc.driver.execute_script(
+        '''
+        return window._test_link_event_counter;
+    '''
+    )
+
+    history_counter = dash_dcc.driver.execute_script(
+        '''
+        return window._test_history_event_counter;
+    '''
+    )
+
+    assert link_counter == 1
+    assert history_counter == 1