= ({
typeof children === 'function'
? (children(provided, snapshot, rubric) as ReactElement)
: children;
- return (
+
+ const content = (
<>
= ({
data-test-subj={dataTestSubj}
className={classes}
css={cssStyles}
- style={{ ...style, ...provided.draggableProps.style }}
+ style={{
+ ...style,
+ ...provided.draggableProps.style,
+ }}
// We use [role="group"] instead of [role="button"] when we expect a nested
// interactive element. Screen readers will cue users that this is a container
// and has one or more elements inside that are part of a related group.
@@ -141,6 +156,12 @@ export const EuiDraggable: FunctionComponent = ({
)}
);
+
+ return isDragging && usePortal ? (
+ {content}
+ ) : (
+ content
+ );
}}
);
diff --git a/packages/eui/src/components/popover/popover.tsx b/packages/eui/src/components/popover/popover.tsx
index 78c13b94226..d78b25eb1dd 100644
--- a/packages/eui/src/components/popover/popover.tsx
+++ b/packages/eui/src/components/popover/popover.tsx
@@ -177,6 +177,8 @@ export interface EuiPopoverProps extends PropsWithChildren, CommonProps {
/**
* Must be set to true if using `EuiDragDropContext` within a popover,
* otherwise your nested drag & drop will have incorrect positioning
+ *
+ * @deprecated - use `usePortal` prop on children `EuiDraggable` components instead.
*/
hasDragDrop?: boolean;
/**
diff --git a/packages/website/docs/02_components/display/drag_and_drop/overview.mdx b/packages/website/docs/02_components/display/drag_and_drop/overview.mdx
index 38f1890e25b..33597d24723 100644
--- a/packages/website/docs/02_components/display/drag_and_drop/overview.mdx
+++ b/packages/website/docs/02_components/display/drag_and_drop/overview.mdx
@@ -126,20 +126,202 @@ the visual changes with drop-to-remove interactions.
-## Kitchen sink
-
-**EuiDraggables** in **EuiDroppables**, **EuiDroppables** in **EuiDraggables**, custom drag handles, horizontal
-movement, vertical movement, flexbox, panel inception, you name it.
-
-
-
-## Using drag and drop in popovers
+## Portalled items
**EuiDraggables** use fixed positioning to render and animate the item being dragged.
This positioning logic does not work as expected when used inside of containers that have their own
[stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context).
-This behavior particularly affects [**EuiPopover**](#/layout/popover). If using drag and drop UX within a popover,
-you **must** include the `` prop for items to properly render while being dragged.
+To ensure dragging works as expected inside e.g. **EuiFlyout** or **EuiModal** use the prop `usePortal` on **EuiDraggable** components.
+This will render the currently dragged element inside a portal appended to the document body (or wherever
+**EuiPortal** is configured to `insert` to by default).
+
+:::warning
+If the styling of the your draggable content is scoped to a parent component, the styling won't be applied
+while dragging it when using `usePortal`. This is due to the portalled position in the DOM, which changes
+previous hierarchical relations to other ancestor elements. To prevent this from happening, we recommend
+applying styling from within the **EuiDraggable** scope without any parent selectors.
+:::
+
+```tsx interactive
+import React, { FunctionComponent, ReactElement, useState } from 'react';
+import {
+ EuiButton,
+ EuiCode,
+ EuiDragDropContext,
+ EuiDraggable,
+ EuiDroppable,
+ EuiFlyout,
+ EuiFlyoutBody,
+ EuiFlyoutHeader,
+ EuiModal,
+ EuiModalBody,
+ EuiModalHeader,
+ EuiPanel,
+ EuiSpacer,
+ EuiTitle,
+ euiDragDropReorder,
+ htmlIdGenerator
+} from '@elastic/eui';
+import { DroppableProps, OnDragEndResponder } from '@hello-pangea/dnd';
+
+const makeId = htmlIdGenerator();
+
+const makeList = (number, start = 1) =>
+ Array.from({ length: number }, (v, k) => k + start).map((el) => {
+ return {
+ content: `Item ${el}`,
+ id: makeId(),
+ };
+ });
+
+const DragContainer: FunctionComponent<{
+ children: ReactElement | ReactElement[] | DroppableProps['children'];
+ onDragEnd: OnDragEndResponder;
+}> = ({ children, onDragEnd }) => (
+
+
+ {children}
+
+
+);
+
+export default () => {
+ const [isFlyoutOpen, setFlyoutOpen] = useState(false);
+ const [isModalOpen, setModalOpen] = useState(false);
+ const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+
+ const [list, setList] = useState(makeList(3));
+ const onDragEnd = ({ source, destination }) => {
+ if (source && destination) {
+ const items = euiDragDropReorder(list, source.index, destination.index);
+
+ setList(items);
+ }
+ };
+
+ return (
+ <>
+ setFlyoutOpen(!isFlyoutOpen)}>
+ Toggle flyout
+
+
+ setModalOpen(!isModalOpen)}>
+ Toggle modal
+
+
+ {isFlyoutOpen && (
+ setFlyoutOpen(false)}>
+
+
+
+ Portalled EuiDraggable items
+
+
+
+
+
+ {list.map(({ content, id }, idx) => (
+
+ {(provided, state) => (
+
+ {content}
+ {state.isDragging && ' ✨'}
+
+ )}
+
+ ))}
+
+
+
+ )}
+
+ {isModalOpen && (
+ setModalOpen(false)}>
+
+
+
+ Portalled EuiDraggable items
+
+
+
+
+
+ {list.map(({ content, id }, idx) => (
+
+ {(provided, state) => (
+
+ {content}
+ {state.isDragging && ' ✨'}
+
+ )}
+
+ ))}
+
+
+
+ )}
+
+
+
+ setIsPopoverOpen(false)}
+ button={
+ setIsPopoverOpen(!isPopoverOpen)}>
+ Toggle popover
+
+ }
+ panelPaddingSize="none"
+ panelProps={{ css: { inlineSize: 200 } }}
+ >
+ {
+ if (source && destination) {
+ const items = euiDragDropReorder(
+ list,
+ source.index,
+ destination.index
+ );
+ setList(items);
+ }
+ }}
+ >
+ {list.map(({ content, id }, idx) => (
+
+ {(provided, state) => (
+ {content}
+ )}
+
+ ))}
+
+
+
+ );
+};
+```
+
+## Kitchen sink
-
+**EuiDraggables** in **EuiDroppables**, **EuiDroppables** in **EuiDraggables**, custom drag handles, horizontal
+movement, vertical movement, flexbox, panel inception, you name it.
+
+