Prevent popovers from rendering clipped outside of Dash app (embedded apps)

Author: KoolADE85

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

@@ -384,6 +384,9 @@ const DatePickerRange = ({
                         className="dash-datepicker-content"
                         align="start"
                         sideOffset={5}
+                        collisionBoundary={containerRef.current?.closest(
+                            '#_dash-app-content'
+                        )}
                         onOpenAutoFocus={e => e.preventDefault()}
                         onCloseAutoFocus={e => {
                             e.preventDefault();

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

@@ -203,6 +203,9 @@ const DatePickerSingle = ({
                         className="dash-datepicker-content"
                         align="start"
                         sideOffset={5}
+                        collisionBoundary={containerRef.current?.closest(
+                            '#_dash-app-content'
+                        )}
                         onOpenAutoFocus={e => e.preventDefault()}
                         onCloseAutoFocus={e => {
                             e.preventDefault();

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

@@ -458,6 +458,9 @@ const Dropdown = (props: DropdownProps) => {
                     className="dash-dropdown-content"
                     align="start"
                     sideOffset={5}
+                    collisionBoundary={positioningContainerRef.current?.closest(
+                        '#_dash-app-content'
+                    )}
                     onOpenAutoFocus={e => e.preventDefault()}
                     onKeyDown={handleKeyDown}
                     style={{