Merge branch 'dev' into bugfix/3572

Author: KoolADE85

.github/CODEOWNERS

@@ -1,3 +1,3 @@
 # These owners will be the default owners for everything in
 # the repo. Unless a later match takes precedence
-* @T4rk1n @ndrezn @emilykl @camdecoster
+* @T4rk1n @ndrezn @camdecoster

.github/dependabot.yml

@@ -0,0 +1,70 @@
+version: 2
+updates:
+  # Root package dependencies
+  - package-ecosystem: "npm"
+    directory: "/"
+    schedule:
+      interval: "weekly"
+      day: "monday"
+    groups:
+      npm-dependencies:
+        patterns:
+          - "*"
+    ignore:
+      # Ignore @plotly packages
+      - dependency-name: "@plotly/*"
+
+  # Dash renderer
+  - package-ecosystem: "npm"
+    directory: "/dash/dash-renderer"
+    schedule:
+      interval: "weekly"
+      day: "monday"
+    groups:
+      npm-dependencies:
+        patterns:
+          - "*"
+
+  # Components - dash-core-components
+  - package-ecosystem: "npm"
+    directory: "/components/dash-core-components"
+    schedule:
+      interval: "weekly"
+      day: "monday"
+    groups:
+      npm-dependencies:
+        patterns:
+          - "*"
+
+  # Components - dash-html-components
+  - package-ecosystem: "npm"
+    directory: "/components/dash-html-components"
+    schedule:
+      interval: "weekly"
+      day: "monday"
+    groups:
+      npm-dependencies:
+        patterns:
+          - "*"
+
+  # Components - dash-table
+  - package-ecosystem: "npm"
+    directory: "/components/dash-table"
+    schedule:
+      interval: "weekly"
+      day: "monday"
+    groups:
+      npm-dependencies:
+        patterns:
+          - "*"
+
+  # Python dependencies
+  - package-ecosystem: "pip"
+    directory: "/"
+    schedule:
+      interval: "weekly"
+      day: "monday"
+    groups:
+      pip-dependencies:
+        patterns:
+          - "*"

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]
+
+## Added
+- [#3637](https://github.com/plotly/dash/pull/3637)  Added `debounce` prop to `Dropdown`.
+
+## Fixed
+- [#3629](https://github.com/plotly/dash/pull/3629) Fix date pickers not showing date when initially rendered in a hidden container.
+
+
+
 ## [4.0.0] - 2026-02-03
 
 ## Added

components/dash-core-components/src/fragments/DatePickerRange.tsx

@@ -20,6 +20,7 @@ import {
     strAsDate,
 } from '../utils/calendar/helpers';
 import {captureCSSForPortal} from '../utils/calendar/cssVariables';
+import ResizeDetector from '../utils/ResizeDetector';
 import '../components/css/datepickers.css';
 
 const DatePickerRange = ({
@@ -104,6 +105,8 @@ const DatePickerRange = ({
     const containerRef = useRef<HTMLDivElement>(null);
     const startInputRef = useRef<HTMLInputElement | null>(null);
     const endInputRef = useRef<HTMLInputElement | null>(null);
+    const startAutosizeRef = useRef<any>(null);
+    const endAutosizeRef = useRef<any>(null);
     const calendarRef = useRef<CalendarHandle>(null);
     const hasPortal = with_portal || with_full_screen_portal;
 
@@ -128,6 +131,19 @@ const DatePickerRange = ({
         setEndInputValue(formatDate(internalEndDate, display_format));
     }, [internalEndDate, display_format]);
 
+    const handleResize = useCallback(() => {
+        startAutosizeRef.current?.updateInputWidth?.();
+        endAutosizeRef.current?.updateInputWidth?.();
+    }, []);
+
+    useEffect(() => {
+        startAutosizeRef.current?.updateInputWidth?.();
+    }, [startInputValue]);
+
+    useEffect(() => {
+        endAutosizeRef.current?.updateInputWidth?.();
+    }, [endInputValue]);
+
     useEffect(() => {
         // Controls when setProps is called. Basically, whenever internal state
         // diverges from props (i.e., user interaction)
@@ -313,6 +329,10 @@ const DatePickerRange = ({
     );
 
     return (
+        <ResizeDetector
+            onResize={handleResize}
+            targets={[containerRef]}
+        >
         <div className="dash-datepicker" ref={containerRef}>
             <Popover.Root
                 open={!disabled && isCalendarOpen}
@@ -335,6 +355,7 @@ const DatePickerRange = ({
                         }}
                     >
                         <AutosizeInput
+                            ref={startAutosizeRef}
                             inputRef={node => {
                                 startInputRef.current = node;
                             }}
@@ -356,6 +377,7 @@ const DatePickerRange = ({
                         />
                         <ArrowIcon className="dash-datepicker-range-arrow" />
                         <AutosizeInput
+                            ref={endAutosizeRef}
                             inputRef={node => {
                                 endInputRef.current = node;
                             }}
@@ -458,6 +480,7 @@ const DatePickerRange = ({
                 </Popover.Portal>
             </Popover.Root>
         </div>
+        </ResizeDetector>
     );
 };
 

components/dash-core-components/src/fragments/DatePickerSingle.tsx

@@ -14,6 +14,7 @@ import {
     strAsDate,
 } from '../utils/calendar/helpers';
 import {captureCSSForPortal} from '../utils/calendar/cssVariables';
+import ResizeDetector from '../utils/ResizeDetector';
 import '../components/css/datepickers.css';
 
 const DatePickerSingle = ({
@@ -63,6 +64,7 @@ const DatePickerSingle = ({
 
     const containerRef = useRef<HTMLDivElement>(null);
     const inputRef = useRef<HTMLInputElement | null>(null);
+    const autosizeRef = useRef<any>(null);
     const calendarRef = useRef<CalendarHandle>(null);
     const hasPortal = with_portal || with_full_screen_portal;
 
@@ -87,6 +89,15 @@ const DatePickerSingle = ({
         }
     }, [internalDate]);
 
+    const handleResize = useCallback(() => {
+        autosizeRef.current?.updateInputWidth?.();
+    }, []);
+
+
+    useEffect(() => {
+        autosizeRef.current?.updateInputWidth?.();
+    }, [inputValue]);
+
     const parseUserInput = useCallback(
         (focusCalendar = false) => {
             if (inputValue === '') {
@@ -157,6 +168,7 @@ const DatePickerSingle = ({
     }
 
     return (
+        <ResizeDetector onResize={handleResize} targets={[containerRef]}>
         <div className="dash-datepicker" ref={containerRef}>
             <Popover.Root
                 open={!disabled && isCalendarOpen}
@@ -179,6 +191,7 @@ const DatePickerSingle = ({
                         }}
                     >
                         <AutosizeInput
+                            ref={autosizeRef}
                             inputRef={node => {
                                 inputRef.current = node;
                             }}
@@ -274,6 +287,7 @@ const DatePickerSingle = ({
                 </Popover.Portal>
             </Popover.Root>
         </div>
+        </ResizeDetector>
     );
 };
 

components/dash-core-components/src/fragments/Dropdown.tsx

@@ -27,6 +27,7 @@ const Dropdown = (props: DropdownProps) => {
         className,
         closeOnSelect,
         clearable,
+        debounce,
         disabled,
         labels,
         maxHeight,
@@ -42,6 +43,7 @@ const Dropdown = (props: DropdownProps) => {
     const [optionsCheck, setOptionsCheck] = useState<DetailedOption[]>();
     const [isOpen, setIsOpen] = useState(false);
     const [displayOptions, setDisplayOptions] = useState<DetailedOption[]>([]);
+    const [val, setVal] = useState<DropdownProps['value']>(value);
     const persistentOptions = useRef<DropdownProps['options']>([]);
     const dropdownContainerRef = useRef<HTMLButtonElement>(null);
     const dropdownContentRef = useRef<HTMLDivElement>(
@@ -53,6 +55,13 @@ const Dropdown = (props: DropdownProps) => {
     const ctx = window.dash_component_api.useDashContext();
     const loading = ctx.useLoading();
 
+    // Sync val when external value prop changes
+    useEffect(() => {
+        if (!isEqual(value, val)) {
+            setVal(value);
+        }
+    }, [value]);
+
     if (!persistentOptions || !isEqual(options, persistentOptions.current)) {
         persistentOptions.current = options;
     }
@@ -68,14 +77,27 @@ const Dropdown = (props: DropdownProps) => {
     );
 
     const sanitizedValues: OptionValue[] = useMemo(() => {
-        if (value instanceof Array) {
-            return value;
+        if (val instanceof Array) {
+            return val;
         }
-        if (isNil(value)) {
+        if (isNil(val)) {
             return [];
         }
-        return [value];
-    }, [value]);
+        return [val];
+    }, [val]);
+
+    const handleSetProps = useCallback(
+        (newValue: DropdownProps['value']) => {
+            if (debounce && isOpen) {
+                // local only
+                setVal(newValue);
+            } else {
+                setVal(newValue);
+                setProps({value: newValue});
+            }
+        },
+        [debounce, isOpen, setProps]
+    );
 
     const updateSelection = useCallback(
         (selection: OptionValue[]) => {
@@ -90,30 +112,28 @@ const Dropdown = (props: DropdownProps) => {
                 if (selection.length === 0) {
                     // Empty selection: only allow if clearable is true
                     if (clearable) {
-                        setProps({value: []});
+                        handleSetProps([]);
                     }
                     // If clearable is false and trying to set empty, do nothing
                     // return;
                 } else {
-                    // Non-empty selection: always allowed in multi-select
-                    setProps({value: selection});
+                    handleSetProps(selection);
                 }
             } else {
                 // For single-select, take the first value or null
                 if (selection.length === 0) {
                     // Empty selection: only allow if clearable is true
                     if (clearable) {
-                        setProps({value: null});
+                        handleSetProps(null);
                     }
                     // If clearable is false and trying to set empty, do nothing
                     // return;
                 } else {
-                    // Take the first value for single-select
-                    setProps({value: selection[selection.length - 1]});
+                    handleSetProps(selection[selection.length - 1]);
                 }
             }
         },
-        [multi, clearable, closeOnSelect]
+        [multi, clearable, closeOnSelect, handleSetProps]
     );
 
     const onInputChange = useCallback(
@@ -182,8 +202,8 @@ const Dropdown = (props: DropdownProps) => {
 
     const handleClear = useCallback(() => {
         const finalValue: DropdownProps['value'] = multi ? [] : null;
-        setProps({value: finalValue});
-    }, [multi]);
+        handleSetProps(finalValue);
+    }, [multi, handleSetProps]);
 
     const handleSelectAll = useCallback(() => {
         if (multi) {
@@ -192,12 +212,12 @@ const Dropdown = (props: DropdownProps) => {
                     .filter(option => !sanitizedValues.includes(option.value))
                     .map(option => option.value)
             );
-            setProps({value: allValues});
+            handleSetProps(allValues);
         }
         if (closeOnSelect) {
             setIsOpen(false);
         }
-    }, [multi, displayOptions, sanitizedValues, closeOnSelect]);
+    }, [multi, displayOptions, sanitizedValues, closeOnSelect, handleSetProps]);
 
     const handleDeselectAll = useCallback(() => {
         if (multi) {
@@ -206,12 +226,12 @@ const Dropdown = (props: DropdownProps) => {
                     displayOption => displayOption.value === option
                 );
             });
-            setProps({value: withDeselected});
+            handleSetProps(withDeselected);
         }
         if (closeOnSelect) {
             setIsOpen(false);
         }
-    }, [multi, displayOptions, sanitizedValues, closeOnSelect]);
+    }, [multi, displayOptions, sanitizedValues, closeOnSelect, handleSetProps]);
 
     // Sort options when popover opens - selected options first
     // Update display options when filtered options or selection changes
@@ -370,11 +390,24 @@ const Dropdown = (props: DropdownProps) => {
             setIsOpen(open);
 
             if (!open) {
-                setProps({search_value: undefined});
                 pendingSearchRef.current = '';
+                const updates: Partial<DropdownProps> = {};
+
+                if (!isNil(search_value)) {
+                    updates.search_value = undefined;
+                }
+
+                // Commit debounced value on close only
+                if (debounce && !isEqual(value, val)) {
+                    updates.value = val;
+                }
+
+                if (Object.keys(updates).length > 0) {
+                    setProps(updates);
+                }
             }
         },
-        [filteredOptions, sanitizedValues]
+        [debounce, value, val, search_value, setProps]
     );
 
     const accessibleId = id ?? uuid();

components/dash-core-components/src/types.ts

@@ -741,6 +741,11 @@ export interface DropdownProps extends BaseDccProps<DropdownProps> {
         clear_selection?: string;
         no_options_found?: string;
     };
+    /**
+     * If True, changes to input values will be sent back to the Dash server only when dropdown menu closes.
+     * Use with `closeOnSelect=False`
+     */
+    debounce?: boolean;
 }
 
 export interface ChecklistProps extends BaseDccProps<ChecklistProps> {