Merge branch 'dev' into requires-dir

Author: T4rk1n

CHANGELOG.md

@@ -2,6 +2,16 @@
 All notable changes to `dash` will be documented in this file.
 This project adheres to [Semantic Versioning](https://semver.org/).
 
+## UNRELEASED
+
+## Fixed
+
+- [#2860](https://github.com/plotly/dash/pull/2860) Fix dcc.Loading to apply overlay_style only to the children and not the spinner. Fixes [#2858](https://github.com/plotly/dash/issues/2858)
+- [#2854](https://github.com/plotly/dash/pull/2854) Fix dcc.Dropdown resetting empty values to null and triggering callbacks. Fixes [#2850](https://github.com/plotly/dash/issues/2850)
+- [#2859](https://github.com/plotly/dash/pull/2859) Fix base patch operators. fixes [#2855](https://github.com/plotly/dash/issues/2855)
+- [#2856](https://github.com/plotly/dash/pull/2856) Fix multiple consecutive calls with same id to set_props only keeping the last props. Fixes [#2852](https://github.com/plotly/dash/issues/2852)
+- [#2867](https://github.com/plotly/dash/pull/2867) Fix clientside no output callback. Fixes [#2866](https://github.com/plotly/dash/issues/2866)
+
 ## [2.17.0] - 2024-05-03
 
 ## Added

components/dash-core-components/src/components/Loading.react.js

@@ -5,7 +5,6 @@ import DefaultSpinner from '../fragments/Loading/spinners/DefaultSpinner.jsx';
 import CubeSpinner from '../fragments/Loading/spinners/CubeSpinner.jsx';
 import CircleSpinner from '../fragments/Loading/spinners/CircleSpinner.jsx';
 import DotSpinner from '../fragments/Loading/spinners/DotSpinner.jsx';
-import {mergeRight} from 'ramda';
 
 const spinnerComponentOptions = {
     graph: GraphSpinner,
@@ -49,10 +48,6 @@ const Loading = ({
         justifyContent: 'center',
         alignItems: 'center',
     };
-    const hiddenContainer = mergeRight(
-        {visibility: 'hidden', position: 'relative'},
-        overlay_style
-    );
 
     /* Overrides default Loading behavior if target_components is set. By default,
      *  Loading fires when any recursive child enters loading state. This makes loading
@@ -132,14 +127,23 @@ const Loading = ({
 
     return (
         <div
+            style={{position: 'relative', ...parent_style}}
             className={parent_className}
-            style={
-                showSpinner
-                    ? mergeRight(hiddenContainer, parent_style)
-                    : parent_style
-            }
         >
-            {children}
+            <div
+                className={parent_className}
+                style={
+                    showSpinner
+                        ? {
+                              visibility: 'hidden',
+                              ...overlay_style,
+                              ...parent_style,
+                          }
+                        : parent_style
+                }
+            >
+                {children}
+            </div>
             <div style={showSpinner ? coveringSpinner : {}}>
                 {showSpinner &&
                     (custom_spinner || (

components/dash-core-components/src/fragments/Dropdown.react.js

@@ -1,4 +1,4 @@
-import {isNil, pluck, without, pick} from 'ramda';
+import {isNil, pluck, without, pick, isEmpty} from 'ramda';
 import React, {useState, useCallback, useEffect, useMemo, useRef} from 'react';
 import ReactDropdown from 'react-virtualized-select';
 import createFilterOptions from 'react-select-fast-filter-options';
@@ -125,7 +125,8 @@ const Dropdown = props => {
             !search_value &&
             !isNil(sanitizedOptions) &&
             optionsCheck !== sanitizedOptions &&
-            !isNil(value)
+            !isNil(value) &&
+            !isEmpty(value)
         ) {
             const values = sanitizedOptions.map(option => option.value);
             if (multi && Array.isArray(value)) {

components/dash-core-components/tests/integration/dropdown/test_remove_option.py

@@ -2,9 +2,10 @@
 
 import pytest
 
-from dash import Dash, html, dcc, Output, Input, State
+from dash import Dash, html, dcc, Output, Input, State, Patch
 from dash.exceptions import PreventUpdate
 
+from selenium.webdriver.common.keys import Keys
 
 sample_dropdown_options = [
     {"label": "New York City", "value": "NYC"},
@@ -147,3 +148,44 @@ def print_value(n_clicks, options, value):
     btn.click()
     dash_dcc.wait_for_text_to_equal("#value-output", '["NYC"]')
     dash_dcc.wait_for_text_to_equal("#options-output", '["MTL", "NYC"]')
+
+
+def test_ddro004_empty_string_not_updated(dash_dcc):
+    # The value should stay as empty string and not null.
+    app = Dash()
+    app.layout = html.Div(
+        [
+            dcc.Dropdown(["a", "b", "c"], value="", id="drop"),
+            html.Div(id="output"),
+            dcc.Store(data={"count": 0}, id="count"),
+            html.Div(id="count-output"),
+        ]
+    )
+
+    @app.callback(
+        Output("output", "children"),
+        Output("count", "data"),
+        Input("drop", "value"),
+    )
+    def on_value(value):
+        count = Patch()
+        count.count += 1
+        if value is None:
+            return "Value is none", count
+        return f"Value={value}", count
+
+    app.clientside_callback(
+        "data => data.count", Output("count-output", "children"), Input("count", "data")
+    )
+
+    dash_dcc.start_server(app)
+    dash_dcc.wait_for_text_to_equal("#output", "Value=")
+
+    dash_dcc.wait_for_text_to_equal("#count-output", "1")
+
+    select_input = dash_dcc.find_element("#drop input")
+    select_input.send_keys("a")
+    select_input.send_keys(Keys.ENTER)
+
+    dash_dcc.wait_for_text_to_equal("#output", "Value=a")
+    dash_dcc.wait_for_text_to_equal("#count-output", "2")

components/dash-core-components/tests/integration/loading/test_loading_component.py

@@ -406,7 +406,7 @@ def updateDiv(n_clicks):
         dash_dcc.find_element(".loading .dash-spinner")
         # unlike the default, the content should be visible
         dash_dcc.wait_for_text_to_equal("#div-1", "content")
-        dash_dcc.wait_for_style_to_equal("#root > div", "opacity", "0.5")
+        dash_dcc.wait_for_style_to_equal("#root > div > div", "opacity", "0.5")
 
     dash_dcc.wait_for_text_to_equal("#div-1", "changed")
 

dash/_callback.py

@@ -549,6 +549,7 @@ def register_clientside_callback(
     **kwargs,
 ):
     output, inputs, state, prevent_initial_call = handle_callback_args(args, kwargs)
+    no_output = isinstance(output, (list,)) and len(output) == 0
     insert_callback(
         callback_list,
         callback_map,
@@ -559,6 +560,7 @@ def register_clientside_callback(
         state,
         None,
         prevent_initial_call,
+        no_output=no_output,
     )
 
     # If JS source is explicitly given, create a namespace and function

dash/_callback_context.py

@@ -252,7 +252,11 @@ def timing_information(self):
     def set_props(self, component_id: typing.Union[str, dict], props: dict):
         ctx_value = _get_context_value()
         _id = stringify_id(component_id)
-        ctx_value.updated_props[_id] = props
+        existing = ctx_value.updated_props.get(_id)
+        if existing is not None:
+            ctx_value.updated_props[_id] = {**existing, **props}
+        else:
+            ctx_value.updated_props[_id] = props
 
 
 callback_context = CallbackContext()

dash/_patch.py

@@ -36,18 +36,18 @@ def __getstate__(self):
     def __setstate__(self, state):
         vars(self).update(state)
 
-    def __getitem__(self, item):
+    def __getitem__(self, item) -> "Patch":
         validate_slice(item)
         return Patch(location=self._location + [item], parent=self)
 
-    def __getattr__(self, item):
+    def __getattr__(self, item) -> "Patch":
         if item == "tolist":
             # to_json fix
             raise AttributeError
         if item == "_location":
-            return self._location
+            return self._location  # type: ignore
         if item == "_operations":
-            return self._operations
+            return self._operations  # type: ignore
         return self.__getitem__(item)
 
     def __setattr__(self, key, value):
@@ -81,22 +81,32 @@ def __iadd__(self, other):
             self.extend(other)
         else:
             self._operations.append(_operation("Add", self._location, value=other))
+        if not self._location:
+            return self
         return _noop
 
     def __isub__(self, other):
         self._operations.append(_operation("Sub", self._location, value=other))
+        if not self._location:
+            return self
         return _noop
 
     def __imul__(self, other):
         self._operations.append(_operation("Mul", self._location, value=other))
+        if not self._location:
+            return self
         return _noop
 
     def __itruediv__(self, other):
         self._operations.append(_operation("Div", self._location, value=other))
+        if not self._location:
+            return self
         return _noop
 
     def __ior__(self, other):
         self.update(E=other)
+        if not self._location:
+            return self
         return _noop
 
     def __iter__(self):

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

@@ -278,16 +278,18 @@ async function handleClientside(
             returnValue = await returnValue;
         }
 
-        zipIfArray(outputs, returnValue).forEach(([outi, reti]) => {
-            zipIfArray(outi, reti).forEach(([outij, retij]) => {
-                const {id, property} = outij;
-                const idStr = stringifyId(id);
-                const dataForId = (result[idStr] = result[idStr] || {});
-                if (retij !== dc.no_update) {
-                    dataForId[cleanOutputProp(property)] = retij;
-                }
+        if (outputs) {
+            zipIfArray(outputs, returnValue).forEach(([outi, reti]) => {
+                zipIfArray(outi, reti).forEach(([outij, retij]) => {
+                    const {id, property} = outij;
+                    const idStr = stringifyId(id);
+                    const dataForId = (result[idStr] = result[idStr] || {});
+                    if (retij !== dc.no_update) {
+                        dataForId[cleanOutputProp(property)] = retij;
+                    }
+                });
             });
-        });
+        }
     } catch (e) {
         if (e === dc.PreventUpdate) {
             status = STATUS.PREVENT_UPDATE;

dash/long_callback/_proxy_set_props.py

@@ -7,6 +7,12 @@ class ProxySetProps(dict):
     def __init__(self, on_change):
         super().__init__()
         self.on_change = on_change
+        self._data = {}
 
     def __setitem__(self, key, value):
         self.on_change(key, value)
+        self._data.setdefault(key, {})
+        self._data[key] = {**self._data[key], **value}
+
+    def get(self, key):
+        return self._data.get(key)