Merge pull request #2068 from AnnMarieW/dcc-location-callback-nav

dcc location callback nav

Author: alexcjohnson

Diff for: CHANGELOG.md

@@ -6,6 +6,9 @@ This project adheres to [Semantic Versioning](https://semver.org/).
 
 ## Added
 
+-### Added
+
+- [#2068](https://github.com/plotly/dash/pull/2068) Added `refresh="callback-nav"` in `dcc.Location`. This allows for navigation without refreshing the page when url is updated in a callback.
 - [#2417](https://github.com/plotly/dash/pull/2417) Add wait_timeout property to customize the behavior of the default wait timeout used for by wait_for_page, fix [#1595](https://github.com/plotly/dash/issues/1595)
 - [#2417](https://github.com/plotly/dash/pull/2417) Add the element target text for wait_for_text* error message, fix [#945](https://github.com/plotly/dash/issues/945)
 - [#2425](https://github.com/plotly/dash/pull/2425) Add `add_log_handler=True` to Dash init, if you don't want a log stream handler at all.

Diff for: components/dash-core-components/src/components/Location.react.js

@@ -43,7 +43,7 @@ export default class Location extends Component {
                 propsToSet[fieldName] = window.location[fieldName];
             } else if (propVal !== window.location[fieldName]) {
                 // Prop has changed?
-                if (refresh) {
+                if (refresh === true) {
                     // Refresh the page?
                     window.location[fieldName] = propVal;
                 } else if (this.props[fieldName] !== propVal) {
@@ -71,6 +71,9 @@ export default class Location extends Component {
         // Special case -- overrides everything!
         if (hrefUpdated) {
             window.history.pushState({}, '', href);
+            if (refresh === 'callback-nav') {
+                window.dispatchEvent(new CustomEvent('_dashprivate_pushstate'));
+            }
         } else if (pathnameUpdated || hashUpdated || searchUpdated) {
             // Otherwise, we can mash everything together
             const searchVal = type(search) !== 'Undefined' ? search : '';
@@ -80,6 +83,9 @@ export default class Location extends Component {
                 '',
                 `${pathname}${searchVal}${hashVal}`
             );
+            if (refresh === 'callback-nav') {
+                window.dispatchEvent(new CustomEvent('_dashprivate_pushstate'));
+            }
         }
     }
 
@@ -141,8 +147,15 @@ Location.propTypes = {
     /** href in window.location - e.g., "/my/full/pathname?myargument=1#myhash" */
     href: PropTypes.string,
 
-    /** Refresh the page when the location is updated? */
-    refresh: PropTypes.bool,
+    /**
+     * If True, refresh the page when the location is updated.
+     * If 'callback-nav' it will navigate to the new page when the location is updated in
+     * a callback without refreshing the page.
+     */
+    refresh: PropTypes.oneOfType([
+        PropTypes.oneOf(['callback-nav']),
+        PropTypes.bool,
+    ]),
 
     /**
      * Dash-assigned callback that gets fired when the value changes.

Diff for: components/dash-core-components/tests/integration/location/test_location_callback.py

@@ -136,3 +136,53 @@ def check_path_parts(pathname, search, _hash):
     check_path_parts("/test/pathname/a", "?queryA=valueA", "")
 
     assert dash_dcc.get_logs() == []
+
+
+def test_loca003_location_callback(dash_dcc):
+    app = Dash(__name__)
+    app.layout = html.Div(
+        [
+            dcc.Location(id="url", refresh=False),
+            dcc.Location(id="callback-url", refresh="callback-nav"),
+            html.Button(id="callback-btn", n_clicks=0),
+            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"
+
+    @app.callback(
+        Output("callback-url", "pathname"),
+        Input("callback-btn", "n_clicks"),
+    )
+    def update_location(n):
+        if n > 0:
+            return "/page-1"
+
+    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("#callback-btn").click()
+
+    dash_dcc.wait_for_element_by_id("div1")
+
+    assert dash_dcc.get_logs() == []

Diff for: dash/dash.py

@@ -119,7 +119,7 @@
 try:
     page_container = html.Div(
         [
-            dcc.Location(id=_ID_LOCATION),
+            dcc.Location(id=_ID_LOCATION, refresh="callback-nav"),
             html.Div(id=_ID_CONTENT, disable_n_clicks=True),
             dcc.Store(id=_ID_STORE),
             html.Div(id=_ID_DUMMY, disable_n_clicks=True),