Merge pull request #2429 from plotly/fix-2411

Fix side effect on updating possible array children triggering callbacks that were not updated.

Author: T4rk1n

CHANGELOG.md

@@ -13,6 +13,7 @@ This project adheres to [Semantic Versioning](https://semver.org/).
 
 ## Fixed
 
+- [#2429](https://github.com/plotly/dash/pull/2429) Fix side effect on updating possible array children triggering callbacks, fix [#2411](https://github.com/plotly/dash/issues/2411).
 - [#2417](https://github.com/plotly/dash/pull/2417) Disable the pytest plugin if `dash[testing]` not installed, fix [#946](https://github.com/plotly/dash/issues/946).
 - [#2417](https://github.com/plotly/dash/pull/2417) Do not swallow the original error to get the webdriver, easier to know what is wrong after updating the browser but the driver.
 - [#2425](https://github.com/plotly/dash/pull/2425) Fix multiple log handler added unconditionally to the logger, resulting in duplicate log message.

dash/dash-renderer/src/actions/dependencies_ts.ts

@@ -1,16 +1,19 @@
 import {
  all,
+ any,
  assoc,
  concat,
  difference,
  filter,
  flatten,
  forEach,
+ includes,
  isEmpty,
  keys,
  map,
  mergeWith,
  partition,
+ path,
  pickBy,
  props,
  reduce,
@@ -304,6 +307,24 @@ export const getLayoutCallbacks = (
  );
  }
 
+ if (options.filterRoot) {
+ let rootId = path(['props', 'id'], layout);
+ if (rootId) {
+ rootId = stringifyId(rootId);
+ // Filter inputs that are not present in the response
+ callbacks = callbacks.filter(cb =>
+ any(
+ (inp: any) =>
+ !(
+ stringifyId(inp.id) === rootId &&
+ !includes(inp.property, options.filterRoot)
+ ),
+ cb.callback.inputs
+ )
+ );
+ }
+ }
+
  /*
  Return all callbacks with an `executionGroup` to allow group-processing
  */

dash/dash-renderer/src/observers/executedCallbacks.ts

@@ -138,7 +138,8 @@ const observer: IStoreObserverDefinition<IStoreState> = {
  const handlePaths = (
  children: any,
  oldChildren: any,
- oldChildrenPath: any[]
+ oldChildrenPath: any[],
+ filterRoot: any = false
  ) => {
  const oPaths = getState().paths;
  const paths = computePaths(
@@ -152,7 +153,8 @@ const observer: IStoreObserverDefinition<IStoreState> = {
  requestedCallbacks = concat(
  requestedCallbacks,
  getLayoutCallbacks(graphs, paths, children, {
- chunkPath: oldChildrenPath
+ chunkPath: oldChildrenPath,
+ filterRoot
  }).map(rcb => ({
  ...rcb,
  predecessors
@@ -166,7 +168,8 @@ const observer: IStoreObserverDefinition<IStoreState> = {
  getLayoutCallbacks(graphs, oldPaths, oldChildren, {
  removedArrayInputsOnly: true,
  newPaths: paths,
- chunkPath: oldChildrenPath
+ chunkPath: oldChildrenPath,
+ filterRoot
  }).map(rcb => ({
  ...rcb,
  predecessors
@@ -204,7 +207,8 @@ const observer: IStoreObserverDefinition<IStoreState> = {
  }
  },
  oldObj,
- basePath
+ basePath,
+ keys(appliedProps)
  );
  // Only do it once for the component.
  recomputed = true;

tests/integration/renderer/test_component_as_prop.py

@@ -258,3 +258,38 @@ def demo(n_clicks):
  dash_duo.wait_for_text_to_equal(f"#options label:nth-child({i}) span", "")
  dash_duo.wait_for_element(f"#options label:nth-child({i}) button").click()
  dash_duo.wait_for_text_to_equal(f"#options label:nth-child({i}) span", "1")
+
+
+def test_rdcap003_side_effect_regression(dash_duo):
+ # Test for #2411, regression introduced by original rdcap002 fix
+ # callback on the same components that is output with same id but not property triggered
+ # on cap components of array type like Checklist.options[] and Dropdown.options[].
+ app = Dash(__name__)
+
+ app.layout = Div([Button("3<->2", id="a"), Checklist(id="b"), Div(0, id="counter")])
+
+ app.clientside_callback(
+ "function(_, prev) {return parseInt(prev) + 1}",
+ Output("counter", "children"),
+ Input("b", "value"),
+ State("counter", "children"),
+ prevent_initial_call=True,
+ )
+
+ @app.callback(Output("b", "options"), Input("a", "n_clicks"))
+ def opts(n):
+ n_out = 3 - (n or 0) % 2
+ return [str(i) for i in range(n_out)]
+
+ dash_duo.start_server(app)
+
+ dash_duo.wait_for_text_to_equal("#counter", "0")
+ dash_duo.find_element("#a").click()
+ assert len(dash_duo.find_elements("#b label > input")) == 2
+ dash_duo.wait_for_text_to_equal("#counter", "0")
+ dash_duo.find_element("#a").click()
+ assert len(dash_duo.find_elements("#b label > input")) == 3
+ dash_duo.wait_for_text_to_equal("#counter", "0")
+
+ dash_duo.find_elements("#b label > input")[0].click()
+ dash_duo.wait_for_text_to_equal("#counter", "1")