Fix initial props reset back

T4rk1n · T4rk1n · commit a2341878b680 · 2025-03-04T10:58:45.000-05:00
diff --git a/components/dash-core-components/src/fragments/Dropdown.react.js b/components/dash-core-components/src/fragments/Dropdown.react.js
@@ -45,6 +45,7 @@ const Dropdown = props => {
         search_value,
         style,
         value,
+        searchable,
     } = props;
     const [optionsCheck, setOptionsCheck] = useState(null);
     const persistentOptions = useRef(null);
@@ -157,7 +158,7 @@ const Dropdown = props => {
                 options={sanitizedOptions}
                 value={value}
                 onChange={onChange}
-                onInputChange={onInputChange}
+                onInputChange={searchable ? onInputChange : undefined}
                 backspaceRemoves={clearable}
                 deleteRemoves={clearable}
                 inputProps={{autoComplete: 'off'}}
diff --git a/dash/dash-renderer/src/reducers/reducer.js b/dash/dash-renderer/src/reducers/reducer.js
@@ -18,6 +18,7 @@ import layout from './layout';
 import paths from './paths';
 import callbackJobs from './callbackJobs';
 import loading from './loading';
+import {stringifyPath} from '../wrapper/wrapping';
 
 export const apiRequests = [
     'dependenciesRequest',
@@ -36,9 +37,9 @@ function layoutHashes(state = {}, action) {
     ) {
         // Let us compare the paths sums to get updates without triggering
         // render on the parent containers.
-        const jsonPath = JSON.stringify(action.payload.itempath);
-        const prev = pathOr(0, [jsonPath], state);
-        return assoc(jsonPath, prev + 1, state);
+        const strPath = stringifyPath(action.payload.itempath);
+        const prev = pathOr(0, [strPath], state);
+        return assoc(strPath, prev + 1, state);
     }
     return state;
 }
diff --git a/dash/dash-renderer/src/wrapper/DashWrapper.tsx b/dash/dash-renderer/src/wrapper/DashWrapper.tsx
@@ -24,7 +24,7 @@ import {DashConfig} from '../config';
 import {notifyObservers, onError, updateProps} from '../actions';
 import {getWatchedKeys, stringifyId} from '../actions/dependencies';
 import {recordUiEdit} from '../persistence';
-import {createElement, isDryComponent} from './wrapping';
+import {createElement, getComponentLayout, isDryComponent} from './wrapping';
 import Registry from '../registry';
 import isSimpleComponent from '../isSimpleComponent';
 import {
@@ -62,56 +62,61 @@ function DashWrapper({
     const setProps = (newProps: UpdatePropsPayload) => {
         const {id} = componentProps;
         const {_dash_error, ...restProps} = newProps;
-        const oldProps = componentProps;
-        const changedProps = pickBy(
-            (val, key) => !equals(val, oldProps[key]),
-            restProps
-        );
-        if (_dash_error) {
-            dispatch(
-                onError({
-                    type: 'frontEnd',
-                    error: _dash_error
-                })
+
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        dispatch((dispatch, getState) => {
+            const currentState = getState();
+            const {graphs} = currentState;
+
+            const {props: oldProps} = getComponentLayout(
+                componentPath,
+                currentState
             );
-        }
-        if (!isEmpty(changedProps)) {
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-ignore
-            dispatch((dispatch, getState) => {
-                const {graphs} = getState();
-                // Identify the modified props that are required for callbacks
-                const watchedKeys = getWatchedKeys(
-                    id,
-                    keys(changedProps),
-                    graphs
+            const changedProps = pickBy(
+                (val, key) => !equals(val, oldProps[key]),
+                restProps
+            );
+            if (_dash_error) {
+                dispatch(
+                    onError({
+                        type: 'frontEnd',
+                        error: _dash_error
+                    })
                 );
+            }
 
-                batch(() => {
-                    // setProps here is triggered by the UI - record these changes
-                    // for persistence
-                    recordUiEdit(component, newProps, dispatch);
+            if (isEmpty(changedProps)) {
+                return;
+            }
 
-                    // Only dispatch changes to Dash if a watched prop changed
-                    if (watchedKeys.length) {
-                        dispatch(
-                            notifyObservers({
-                                id,
-                                props: pick(watchedKeys, changedProps)
-                            })
-                        );
-                    }
+            // Identify the modified props that are required for callbacks
+            const watchedKeys = getWatchedKeys(id, keys(changedProps), graphs);
+
+            batch(() => {
+                // setProps here is triggered by the UI - record these changes
+                // for persistence
+                recordUiEdit(component, newProps, dispatch);
 
-                    // Always update this component's props
+                // Only dispatch changes to Dash if a watched prop changed
+                if (watchedKeys.length) {
                     dispatch(
-                        updateProps({
-                            props: changedProps,
-                            itempath: componentPath
+                        notifyObservers({
+                            id,
+                            props: pick(watchedKeys, changedProps)
                         })
                     );
-                });
+                }
+
+                // Always update this component's props
+                dispatch(
+                    updateProps({
+                        props: changedProps,
+                        itempath: componentPath
+                    })
+                );
             });
-        }
+        });
     };
 
     const createContainer = useCallback(
diff --git a/dash/dash-renderer/src/wrapper/selectors.ts b/dash/dash-renderer/src/wrapper/selectors.ts
@@ -1,22 +1,20 @@
-import {path} from 'ramda';
-
 import {DashLayoutPath, DashComponent, BaseDashProps} from '../types/component';
+import {getComponentLayout, stringifyPath} from './wrapping';
 
 type SelectDashProps = [DashComponent, BaseDashProps, number];
 
 export const selectDashProps =
     (componentPath: DashLayoutPath) =>
     (state: any): SelectDashProps => {
-        const c = path(componentPath, state.layout) as DashComponent;
+        const c = getComponentLayout(componentPath, state);
         // Layout hashes records the number of times a path has been updated.
         // sum with the parents hash (match without the last ']') to get the real hash
         // Then it can be easily compared without having to compare the props.
-        let jsonPath = JSON.stringify(componentPath);
-        jsonPath = jsonPath.substring(0, jsonPath.length - 1);
+        const strPath = stringifyPath(componentPath);
 
         const h = Object.entries(state.layoutHashes).reduce(
-            (acc, [path, pathHash]) =>
-                jsonPath.startsWith(path.substring(0, path.length - 1))
+            (acc, [updatedPath, pathHash]) =>
+                strPath.startsWith(updatedPath)
                     ? (pathHash as number) + acc
                     : acc,
             0
diff --git a/dash/dash-renderer/src/wrapper/wrapping.ts b/dash/dash-renderer/src/wrapper/wrapping.ts
@@ -1,5 +1,6 @@
 import React from 'react';
-import {mergeRight, type, has} from 'ramda';
+import {mergeRight, path, type, has, join} from 'ramda';
+import {DashComponent, DashLayoutPath} from '../types/component';
 
 export function createElement(
     element: any,
@@ -49,3 +50,14 @@ export function validateComponent(componentDefinition: any) {
         );
     }
 }
+
+export function stringifyPath(layoutPath: DashLayoutPath) {
+    return join(',', layoutPath);
+}
+
+export function getComponentLayout(
+    componentPath: DashLayoutPath,
+    state: any
+): DashComponent {
+    return path(componentPath, state.layout) as DashComponent;
+}
diff --git a/tests/integration/test_integration.py b/tests/integration/test_integration.py
@@ -472,3 +472,37 @@ def my_route_f():
     response = requests.post(url)
     assert response.status_code == 200
     assert response.text == "hello"
+
+
+def test_inin031_initial_value_set_back(dash_duo):
+    # Test for regression on the initial value to be able to
+    # set back to initial after changing again.
+    app = Dash(__name__)
+
+    app.layout = html.Div(
+        [
+            dcc.Dropdown(
+                id="dropdown",
+                options=["Toronto", "Montréal", "Vancouver"],
+                value="Toronto",
+                searchable=False,
+            ),
+            html.Div(id="output"),
+        ]
+    )
+
+    @app.callback(Output("output", "children"), [Input("dropdown", "value")])
+    def callback(value):
+        return f"You have selected {value}"
+
+    dash_duo.start_server(app)
+
+    dash_duo.wait_for_text_to_equal("#output", "You have selected Toronto")
+
+    dash_duo.select_dcc_dropdown("#dropdown", "Vancouver")
+    dash_duo.wait_for_text_to_equal("#output", "You have selected Vancouver")
+
+    dash_duo.select_dcc_dropdown("#dropdown", "Toronto")
+    dash_duo.wait_for_text_to_equal("#output", "You have selected Toronto")
+
+    assert dash_duo.get_logs() == []
