patternfly / patternfly/patternfly-react

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

Open
#12,612 3 comments 1 reaction 0 assignees View on GitHub

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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.