Fix Radix popovers not positioned correctly in certain DDK or Embedded scenarios

Author: KoolADE85

components/dash-core-components/src/components/css/datepickers.css

@@ -8,7 +8,7 @@
     outline: none;
     width: 100%;
     font-size: inherit;
-    overflow: hidden;
+    position: relative;
     accent-color: var(--Dash-Fill-Interactive-Strong);
     outline-color: var(--Dash-Fill-Interactive-Strong);
 }
@@ -231,3 +231,8 @@
     width: 20px;
     height: 20px;
 }
+
+/* Override Radix's position: fixed to use position: absolute when using custom container */
+div[data-radix-popper-content-wrapper]:has(.dash-datepicker-content) {
+    position: absolute !important;
+}

components/dash-core-components/src/components/css/dropdown.css

@@ -212,3 +212,13 @@
     padding: calc(var(--Dash-Spacing) * 2) calc(var(--Dash-Spacing) * 3);
     box-shadow: 0 -1px 0 0 var(--Dash-Fill-Disabled) inset;
 }
+
+/* Positioning container for the dropdown */
+.dash-dropdown-wrapper {
+    position: relative;
+}
+
+/* Override Radix's position: fixed to use position: absolute when using custom container */
+div[data-radix-popper-content-wrapper]:has(.dash-dropdown-content) {
+    position: absolute !important;
+}

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

@@ -47,6 +47,7 @@ const Dropdown = (props: DropdownProps) => {
     const dropdownContentRef = useRef<HTMLDivElement>(
         document.createElement('div')
     );
+    const searchInputRef = useRef<HTMLInputElement>(null);
 
     const ctx = window.dash_component_api.useDashContext();
     const loading = ctx.useLoading();
@@ -234,22 +235,33 @@ const Dropdown = (props: DropdownProps) => {
         }
     }, [filteredOptions, isOpen]);
 
-    // Focus (and scroll) the first selected item when dropdown opens
+    // Focus first selected item or search input when dropdown opens
     useEffect(() => {
-        if (!isOpen || multi || search_value) {
+        if (!isOpen || search_value) {
             return;
         }
 
         // waiting for the DOM to be ready after the dropdown renders
         requestAnimationFrame(() => {
-            const selectedValue = sanitizedValues[0];
-
-            const selectedElement = dropdownContentRef.current.querySelector(
-                `.dash-options-list-option-checkbox[value="${selectedValue}"]`
-            );
+            // Try to focus the first selected item (for single-select)
+            if (!multi) {
+                const selectedValue = sanitizedValues[0];
+                if (selectedValue) {
+                    const selectedElement =
+                        dropdownContentRef.current.querySelector(
+                            `.dash-options-list-option-checkbox[value="${selectedValue}"]`
+                        );
+
+                    if (selectedElement instanceof HTMLElement) {
+                        selectedElement.focus();
+                        return;
+                    }
+                }
+            }
 
-            if (selectedElement instanceof HTMLElement) {
-                selectedElement?.focus();
+            // Fallback: focus search input if available and no selected item was focused
+            if (searchable && searchInputRef.current) {
+                searchInputRef.current.focus();
             }
         });
     }, [isOpen, multi, displayOptions, sanitizedValues]);
@@ -335,7 +347,7 @@ const Dropdown = (props: DropdownProps) => {
             } else {
                 focusableElements[nextIndex].scrollIntoView({
                     behavior: 'auto',
-                    block: 'center',
+                    block: 'nearest',
                 });
             }
         }
@@ -354,8 +366,9 @@ const Dropdown = (props: DropdownProps) => {
     );
 
     const accessibleId = id ?? uuid();
+    const positioningContainerRef = useRef<HTMLDivElement>(null);
 
-    return (
+    const popover = (
         <Popover.Root open={isOpen} onOpenChange={handleOpenChange}>
             <Popover.Trigger asChild>
                 <button
@@ -365,6 +378,7 @@ const Dropdown = (props: DropdownProps) => {
                     type="button"
                     onKeyDown={e => {
                         if (e.key === 'ArrowDown') {
+                            e.preventDefault();
                             setIsOpen(true);
                         }
                     }}
@@ -426,7 +440,7 @@ const Dropdown = (props: DropdownProps) => {
                 // container is required otherwise popover will be rendered
                 // at document root, which may be outside of the Dash app (i.e.
                 // an embedded app)
-                container={dropdownContainerRef.current?.parentElement}
+                container={positioningContainerRef.current}
             >
                 <Popover.Content
                     ref={dropdownContentRef}
@@ -451,7 +465,7 @@ const Dropdown = (props: DropdownProps) => {
                                 value={search_value || ''}
                                 autoComplete="off"
                                 onChange={e => onInputChange(e.target.value)}
-                                autoFocus
+                                ref={searchInputRef}
                             />
                             {search_value && (
                                 <button
@@ -512,6 +526,12 @@ const Dropdown = (props: DropdownProps) => {
             </Popover.Portal>
         </Popover.Root>
     );
+
+    return (
+        <div ref={positioningContainerRef} className="dash-dropdown-wrapper">
+            {popover}
+        </div>
+    );
 };
 
 export default Dropdown;

components/dash-core-components/tests/integration/calendar/test_calendar_props.py

@@ -37,6 +37,7 @@ def test_cdpr001_date_clearable_true_works(dash_dcc):
     assert selected, "single date should get a value"
     close_btn = dash_dcc.wait_for_element("#dps-wrapper .dash-datepicker-clear")
     close_btn.click()
+    sleep(0.25)
     (single_date,) = dash_dcc.get_date_range("dps")
     assert not single_date, "date should be cleared"