patternfly / patternfly/patternfly-react
Bug - DragDropSort - Visual glitch whenever using DragDropSort inside of a Dropdown/Menu/Select
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 862
- Forks
- 392
- Avg merge
- 4d 8h
- Merged PRs (30d)
- 9
Description
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}
/>
);
};
https://github.com/user-attachments/assets/5a8803e3-b013-4162-a943-1cb9703ffd5a
Jira Issue: PF-4538
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the supplied BugRepro example and reproduce the glitch using DragDropSort inside MenuContainer and Menu. Read the DragDropSort and menu component entry points to trace the rerender behavior, then verify that opening and using the menu no longer causes the reported visual glitch.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 55/100