Merge branch 'dev' into dev

T4rk1n · web-flow · commit 9cdebb080f92 · 2026-04-08T14:22:35.000-04:00
diff --git a/.github/workflows/testing.yml b/.github/workflows/testing.yml
@@ -94,6 +94,7 @@ jobs:
   test-typing:
     name: Typing Tests
     runs-on: ubuntu-latest
+    if: github.ref_name != 'master'
     needs: build
     timeout-minutes: 30
     strategy:
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,7 @@ This project adheres to [Semantic Versioning](https://semver.org/).
 
 ## Added
 - [#3669](https://github.com/plotly/dash/pull/3669) Selection for DataTable cleared with custom action settings
+- [#3680](https://github.com/plotly/dash/pull/3680) Added `search_order` prop to `Dropdown` to allow users to preserve original option order during search 
 
 ## Added
 - [#3523](https://github.com/plotly/dash/pull/3523) Fall back to background callback function names if source cannot be found
diff --git a/components/dash-core-components/src/fragments/Dropdown.tsx b/components/dash-core-components/src/fragments/Dropdown.tsx
@@ -41,6 +41,7 @@ const Dropdown = (props: DropdownProps) => {
         setProps,
         searchable,
         search_value,
+        search_order,
         style,
         value,
     } = props;
@@ -81,9 +82,9 @@ const Dropdown = (props: DropdownProps) => {
     const filteredOptions = useMemo(
         () =>
             searchable
-                ? filterOptions(sanitized, search_value)
+                ? filterOptions(sanitized, search_value, search_order)
                 : sanitizedOptions,
-        [sanitized, searchable, search_value]
+        [sanitized, searchable, search_value, search_order]
     );
 
     const sanitizedValues: OptionValue[] = useMemo(() => {
diff --git a/components/dash-core-components/src/types.ts b/components/dash-core-components/src/types.ts
@@ -746,6 +746,13 @@ export interface DropdownProps extends BaseDccProps<DropdownProps> {
      * Use with `closeOnSelect=False`
      */
     debounce?: boolean;
+
+    /**
+     * The order in which to search results appear. 'index' (the default) means that
+     * options are presented based on search relevance, while 'original' keeps the
+     * order of options as they were originally provided.
+     */
+    search_order?: 'index' | 'original';
 }
 
 export interface ChecklistProps extends BaseDccProps<ChecklistProps> {
diff --git a/components/dash-core-components/src/utils/dropdownSearch.ts b/components/dash-core-components/src/utils/dropdownSearch.ts
@@ -60,7 +60,8 @@ export function sanitizeDropdownOptions(
 
 export function filterOptions(
     options: SanitizedOptions,
-    searchValue?: string
+    searchValue?: string,
+    search_order?: 'index' | 'original'
 ): DetailedOption[] {
     if (!searchValue) {
         return options.options;
@@ -79,5 +80,13 @@ export function filterOptions(
         search.addDocuments(options.options);
     }
 
-    return (search.search(searchValue) as DetailedOption[]) || [];
+    const searchResults =
+        (search.search(searchValue) as DetailedOption[]) || [];
+
+    if (search_order === 'original') {
+        const resultSet = new Set(searchResults);
+        return options.options.filter(option => resultSet.has(option));
+    }
+
+    return searchResults;
 }
diff --git a/components/dash-core-components/tests/integration/dropdown/test_dropdown_search_order.py b/components/dash-core-components/tests/integration/dropdown/test_dropdown_search_order.py
@@ -0,0 +1,164 @@
+from dash import Dash, html, dcc, Input, Output
+from selenium.webdriver.common.keys import Keys
+from selenium.webdriver.common.action_chains import ActionChains
+from time import sleep
+
+
+def test_ddso001_search_preserves_custom_order(dash_duo):
+    app = Dash(__name__)
+
+    app.layout = html.Div(
+        [
+            dcc.Dropdown(
+                id="dropdown",
+                options=["11 Text", "12", "23", "112", "111", "110", "22"],
+                searchable=True,
+                search_order="original",
+            ),
+            html.Div(id="output"),
+        ]
+    )
+
+    dash_duo.start_server(app)
+
+    dropdown = dash_duo.find_element("#dropdown")
+    dropdown.click()
+    dash_duo.wait_for_element(".dash-dropdown-options")
+
+    # Search for '11'
+    search_input = dash_duo.find_element(".dash-dropdown-search")
+    search_input.send_keys("11")
+    sleep(0.2)
+
+    # Presents matching options in original order
+    options = dash_duo.find_elements(".dash-dropdown-option")
+    assert len(options) == 4
+    assert [opt.text for opt in options] == ["11 Text", "112", "111", "110"]
+
+    assert dash_duo.get_logs() == []
+
+
+def test_ddso002_multi_search_preserves_custom_order(dash_duo):
+    def send_keys(key):
+        ActionChains(dash_duo.driver).send_keys(key).perform()
+
+    app = Dash(__name__)
+    app.layout = html.Div(
+        [
+            dcc.Dropdown(
+                id="dropdown",
+                options=["11 Text", "12", "112", "111", "110"],
+                multi=True,
+                searchable=True,
+                search_order="original",
+            ),
+            html.Div(id="output"),
+        ]
+    )
+
+    @app.callback(Output("output", "children"), Input("dropdown", "value"))
+    def update_output(value):
+        return f"Selected: {value}"
+
+    dash_duo.start_server(app)
+
+    dropdown = dash_duo.find_element("#dropdown")
+    dropdown.click()
+    dash_duo.wait_for_element(".dash-dropdown-options")
+
+    # Select '12' (second option)
+    send_keys(Keys.ARROW_DOWN)
+    sleep(0.2)
+    send_keys(Keys.ARROW_DOWN)
+    sleep(0.2)
+    send_keys(Keys.SPACE)
+    dash_duo.wait_for_text_to_equal("#output", "Selected: ['12']")
+    sleep(0.2)
+
+    # Select '111' (fourth option)
+    send_keys(Keys.ARROW_DOWN)
+    sleep(0.2)
+    send_keys(Keys.ARROW_DOWN)
+    sleep(0.2)
+    send_keys(Keys.SPACE)
+    dash_duo.wait_for_text_to_equal("#output", "Selected: ['12', '111']")
+    sleep(0.2)
+
+    # Search for '1'
+    send_keys(Keys.HOME)
+    sleep(0.2)
+    send_keys("1")
+    sleep(0.2)
+
+    # Presents selected options first and rest in original order
+    options = dash_duo.find_elements(".dash-dropdown-option")
+    assert len(options) == 5
+    assert [opt.text for opt in options] == ["12", "111", "11 Text", "112", "110"]
+
+    assert dash_duo.get_logs() == []
+
+
+def test_ddso003_search_preserves_custom_order_full_list(dash_duo):
+    app = Dash(__name__)
+
+    app.layout = html.Div(
+        [
+            dcc.Dropdown(
+                id="dropdown",
+                options=["A", "Zebra", "Apply", "Apple"],
+                searchable=True,
+                search_order="original",
+            ),
+            html.Div(id="output"),
+        ]
+    )
+    dash_duo.start_server(app)
+
+    dropdown = dash_duo.find_element("#dropdown")
+    dropdown.click()
+
+    search_input = dash_duo.find_element(".dash-dropdown-search")
+
+    # Search for 'A', returns all options
+    search_input.send_keys("A")
+    sleep(0.2)
+
+    # Presents all options in original order
+    options = dash_duo.find_elements(".dash-dropdown-option")
+    assert len(options) == 4
+    assert [opt.text for opt in options] == ["A", "Zebra", "Apply", "Apple"]
+
+    assert dash_duo.get_logs() == []
+
+
+def test_ddso004_search_no_match(dash_duo):
+    app = Dash(__name__)
+
+    app = Dash(__name__)
+    app.layout = html.Div(
+        [
+            dcc.Dropdown(
+                id="dropdown",
+                options=["11 Text", "12", "110", "111", "112"],
+                searchable=True,
+                search_order="original",
+            ),
+            html.Div(id="output"),
+        ]
+    )
+    dash_duo.start_server(app)
+
+    dropdown = dash_duo.find_element("#dropdown")
+    dropdown.click()
+
+    search_input = dash_duo.find_element(".dash-dropdown-search")
+
+    # Search for 'A', returns no options
+    search_input.send_keys("A")
+    sleep(0.2)
+
+    options = dash_duo.find_elements(".dash-dropdown-option")
+
+    assert len(options) == 1
+    assert [opt.text for opt in options] == ["No options found"]
+    assert dash_duo.get_logs() == []
diff --git a/components/dash-core-components/tests/integration/loading/test_loading_component.py b/components/dash-core-components/tests/integration/loading/test_loading_component.py
@@ -1,5 +1,5 @@
 from multiprocessing import Lock
-from dash import Dash, Input, Output, dcc, html
+from dash import Dash, Input, Output, dcc, html, MATCH, ALL
 from dash.dependencies import stringify_id
 from dash.testing import wait
 import time
@@ -417,7 +417,7 @@ def updateDiv(n_clicks):
 
 # update multiple props of same component, only targeted id/prop triggers spinner
 # test that target_components id can be a dict id
-def test_ldcp011_loading_component_target_components(dash_dcc):
+def test_ldcp010_loading_component_target_components(dash_dcc):
     lock = Lock()
 
     app = Dash(__name__)
@@ -461,7 +461,7 @@ def updateDiv2(n_clicks):
 
     dash_dcc.start_server(app)
 
-    btn1id = "#" + stringify_id({"type": "button", "index": "one"})
+    btn1id = "[id='" + stringify_id({"type": "button", "index": "one"}) + "']"
 
     dash_dcc.wait_for_text_to_equal(btn1id, "content 1")
 
@@ -839,3 +839,50 @@ def update_btn1_children(n_clicks):
     assert spinners == []
 
     assert dash_dcc.get_logs() == []
+
+
+# loading spinner triggers when callback Output uses ALL wildcard
+def test_ldcp019_loading_component_pattern_matching(dash_dcc):
+    lock = Lock()
+
+    app = Dash(__name__)
+
+    app.layout = html.Div(
+        [
+            dcc.Loading(
+                [
+                    html.Div(
+                        id={"type": "div-1", "index": 1, "name": "test"},
+                        className="div-1",
+                    )
+                ],
+                className="loading",
+            )
+        ],
+        id={"type": "root", "index": 1, "name": "test"},
+        className="root",
+    )
+
+    @app.callback(
+        Output({"type": "div-1", "index": ALL, "name": MATCH}, "children"),
+        Input({"type": "root", "index": ALL, "name": MATCH}, "n_clicks"),
+    )
+    def updateDiv(n_clicks):
+        if n_clicks == [1]:
+            time.sleep(0.1)
+            return ["changed"]
+        return ["content"]
+
+    with lock:
+        dash_dcc.start_server(app)
+        dash_dcc.wait_for_text_to_equal(".div-1", "content")
+
+        dash_dcc.find_element(".root").click()
+
+        dash_dcc.find_element(".loading .dash-spinner")
+        # mounted but hidden, so looks like no text
+        dash_dcc.wait_for_text_to_equal(".div-1", "")
+
+    dash_dcc.wait_for_text_to_equal(".div-1", "changed")
+
+    assert dash_dcc.get_logs() == []
diff --git a/dash/dash-renderer/src/actions/callbacks.ts b/dash/dash-renderer/src/actions/callbacks.ts
@@ -791,7 +791,7 @@ export function executeCallback(
         }
 
         const __execute = async (): Promise<CallbackResult> => {
-            const loadingOutputs = outputs.map(out => ({
+            const loadingOutputs = flatten(outputs).map(out => ({
                 path: getPath(paths, out.id),
                 property: out.property?.split('@')[0],
                 id: stringifyId(out.id)

Original file line number	Diff line number	Diff line change
`@@ -791,7 +791,7 @@ export function executeCallback(`
`791`	`791`	`}`
`792`	`792`
`793`	`793`	`const __execute = async (): Promise<CallbackResult> => {`
`794`		`- const loadingOutputs = outputs.map(out => ({`
	`794`	`+ const loadingOutputs = flatten(outputs).map(out => ({`
`795`	`795`	`path: getPath(paths, out.id),`
`796`	`796`	`property: out.property?.split('@')[0],`
`797`	`797`	`id: stringifyId(out.id)`