patternfly / patternfly/patternfly-react
Bug - DragDropSort - Visual glitch whenever using DragDropSort inside of a Dropdown/Menu/Select
まだ誰も着手していません。
- 主要言語
- TypeScript
- スター
- 862
- フォーク
- 392
- 平均マージ
- 4日 8時間
- マージ済み PR(30日)
- 9
説明
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
コントリビューションガイド
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
調査の方向性
提供された BugRepro の例から始め、MenuContainer と Menu 内で DragDropSort を使って不具合を再現します。DragDropSort とメニューコンポーネントのエントリポイントを読み、再レンダリングの挙動を追跡してから、メニューを開いて使用しても報告された視覚的な不具合が発生しなくなったことを確認します。
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- react, typescript
- 領域
- frontend
- issue の種類
- バグ
- 難易度
- 3/5
- 見積もり時間
- 1〜2日
- 活発さ
- 静か
- 明瞭さ
- おおむね明確
- 初心者へのやさしさ
- 55/100