Bug - DragDropSort - Visual glitch whenever using DragDropSort inside of a Dropdown/Menu/Select

[AronH99]

There is a visual glitch whenever using Patternfly's Select, Dropdown or Menu in combination with a DragDropSort.
It seems like a rerendering which is not so pretty from a UI perspective.
I attached a video and the snippet I used so u can recreate this issue as well.
Using:
"react": "^19.2.5",
"@patternfly/react-core": "^6.4.3",
"@patternfly/react-drag-drop": "^6.4.3",

import { useState, useRef } from "react";
import {
  DataList,
  DataListCell,
  DataListCheck,
  DataListControl,
  DataListItemCells,
  Menu,
  MenuContainer,
  MenuToggle,
} from "@patternfly/react-core";
import { DragDropSort, DraggableObject } from "@patternfly/react-drag-drop";

const getItems = (count: number): DraggableObject[] =>
  Array.from({ length: count }, (_, idx) => idx).map((idx) => ({
    id: `data-list-item-${idx}`,
    content: (
      <>
        <DataListControl>
          <DataListCheck
            id={`check-drag-${idx}`}
            aria-labelledby={`item-${idx}`}
            name={`item-${idx}`}
            otherControls
          />
        </DataListControl>
        <DataListItemCells
          dataListCells={[
            <DataListCell key={`item-${idx}`}>
              <span id={`item-${idx}`}>{`item-${idx}`}</span>
            </DataListCell>,
          ]}
        />
      </>
    ),
  }));

export const BugRepro = () => {
  const [isOpen, setIsOpen] = useState(false);
  const toggleRef = useRef(null);
  const menuRef = useRef(null);
  const [items, setItems] = useState(getItems(10));

  const toggle = (
    <MenuToggle
      ref={toggleRef}
      variant="plain"
      onClick={() => setIsOpen((prev) => !prev)}
      isExpanded={isOpen}
    >
      Toggle
    </MenuToggle>
  );

  const menu = (
    <Menu ref={menuRef}>
      <DragDropSort
        items={items}
        onDrop={(_, newItems) => setItems(newItems)}
        variant="DataList"
        overlayProps={{ isCompact: true }}
      >
        <DataList aria-label="list" isCompact />
      </DragDropSort>
    </Menu>
  );

  return (
    <MenuContainer
      isOpen={isOpen}
      onOpenChange={setIsOpen}
      toggleRef={toggleRef}
      menuRef={menuRef}
      toggle={toggle}
      menu={menu}
    />
  );
};

Screen.Recording.2026-05-20.at.15.55.24.mov

---

Jira Issue: PF-4538

[github-actions]

This issue has been automatically marked as stale because it has not had activity in the last 60 days.

[AronH99]

Update:
This is still an active issue

[coderabbitai]

🔗 Related PRs

#12306 - fix: Updated drag and drop to use the correct glass theme. [merged]

---

📝 Issue Planner

_{Check the box below or use the @coderabbitai plan command to generate an implementation plan and prompts that you can use with your favorite coding assistant.}

• Create Plan

---

🧪 Issue enrichment is currently in open beta.

You can configure auto-planning by selecting labels in the issue_enrichment configuration.

To disable automatic issue enrichment, add the following to your .coderabbit.yaml:

issue_enrichment:
  auto_enrich:
    enabled: false

💬 Have feedback or questions? Drop into our discord!