Merge branch 'dev' into dev

Author: T4rk1n

.circleci/config.yml

@@ -1 +1 @@
-lts/iron
+24

.github/workflows/testing.yml

@@ -7,13 +7,16 @@ 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 `csrf_token_name` and `csrf_header_name` config options to allow configuring the CSRF cookie and header names. Fixes [#729](https://github.com/plotly/dash/issues/729)
 
 ## Added
 - [#3523](https://github.com/plotly/dash/pull/3523) Fall back to background callback function names if source cannot be found
 
 ## Fixed
 - [#3690](https://github.com/plotly/dash/pull/3690) Fixes Input when min or max is set to None
 - [#3723](https://github.com/plotly/dash/pull/3723) Fix misaligned `dcc.Slider` marks when some labels are empty strings
+- [#3740](https://github.com/plotly/dash/pull/3740) Fix cannot tab into dropdowns in Safari
+- [#2462](https://github.com/plotly/dash/issues/2462) Allow `MATCH` in `Input`/`State` when the callback's `Output` has no wildcards (fixed-id Output, no Output, or `ALL`-only wildcard Output). `ALLSMALLER` still requires a corresponding `MATCH` in an Output.
 
 ## [4.1.0] - 2026-03-23
 

.nvmrc

@@ -55,6 +55,12 @@
     cursor: not-allowed;
 }
 
+.dash-dropdown-focus-target {
+    position: absolute;
+    opacity: 0;
+    pointer-events: none;
+}
+
 .dash-dropdown-value {
     max-width: 100%;
     text-align: left;

.test_durations

@@ -313,6 +313,7 @@ const Dropdown = (props: DropdownProps) => {
             const relevantKeys = [
                 'ArrowDown',
                 'ArrowUp',
+                'Tab',
                 'PageDown',
                 'PageUp',
                 'Home',
@@ -342,6 +343,19 @@ const Dropdown = (props: DropdownProps) => {
             let nextIndex: number;
 
             switch (e.key) {
+                case 'Tab': {
+                    // Trap Tab inside the popover so Safari (which
+                    // skips non-text inputs) can navigate options.
+                    const next = current + (e.shiftKey ? -1 : 1);
+                    if (next < minIndex) {
+                        nextIndex = maxIndex;
+                    } else if (next > maxIndex) {
+                        nextIndex = minIndex;
+                    } else {
+                        nextIndex = next;
+                    }
+                    break;
+                }
                 case 'ArrowDown':
                     nextIndex = current < maxIndex ? current + 1 : minIndex;
                     break;
@@ -408,12 +422,37 @@ const Dropdown = (props: DropdownProps) => {
 
     const popover = (
         <Popover.Root open={isOpen} onOpenChange={handleOpenChange}>
+            {/* Safari skips <button> in the Tab order; this hidden
+                input receives Tab focus and delegates to the button. */}
+            <input
+                className="dash-dropdown-focus-target"
+                tabIndex={disabled ? -1 : 0}
+                readOnly
+                aria-hidden="true"
+                onFocus={e => {
+                    if (e.relatedTarget !== dropdownContainerRef.current) {
+                        e.currentTarget.tabIndex = -1;
+                        dropdownContainerRef.current?.focus();
+                    }
+                }}
+                onClick={() => {
+                    dropdownContainerRef.current?.click();
+                }}
+            />
             <Popover.Trigger asChild>
                 <button
                     id={id}
                     ref={dropdownContainerRef}
                     disabled={disabled}
                     type="button"
+                    tabIndex={-1}
+                    onBlur={e => {
+                        const dummyInput =
+                            e.currentTarget.previousElementSibling;
+                        if (dummyInput instanceof HTMLElement) {
+                            dummyInput.tabIndex = 0;
+                        }
+                    }}
                     onKeyDown={e => {
                         if (['ArrowDown', 'Enter'].includes(e.key)) {
                             e.preventDefault();

CHANGELOG.md

@@ -142,7 +142,9 @@ def test_dtps012_initial_visible_month(dash_dcc):
 
     # Check that calendar shows January 2010 (initial_visible_month), not June 2020 (date)
     month_dropdown = dash_dcc.find_element(".dash-datepicker-controls .dash-dropdown")
-    year_input = dash_dcc.find_element(".dash-datepicker-controls input")
+    year_input = dash_dcc.find_element(
+        ".dash-datepicker-controls input:not([aria-hidden])"
+    )
 
     assert "January" in month_dropdown.text, "Calendar should show January"
     assert year_input.get_attribute("value") == "2010", "Calendar should show year 2010"

components/dash-core-components/.test_durations

@@ -28,7 +28,9 @@ def click_everything_in_datepicker(datepicker_id, dash_dcc):
         )
     )
 
-    interactive_elements.extend(popover.find_elements(By.CSS_SELECTOR, "input"))
+    interactive_elements.extend(
+        popover.find_elements(By.CSS_SELECTOR, "input:not([aria-hidden])")
+    )
 
     buttons = reversed(
         popover.find_elements(By.CSS_SELECTOR, "button")