Bug - DragDropSort - Visual glitch whenever using DragDropSort inside of a Dropdown/Menu/Select
Chưa có ai nhận issue này.
Đánh giá
- Độ khó
- 3/5
- Thời gian dự kiến
- 1-2 ngày
- Mức phù hợp với người mới
- 55/100
- Loại issue
- Lỗi
- Độ rõ ràng
- Khá rõ ràng
- Mức độ hoạt động
- Ít trao đổi
- Công nghệ
- react, typescript
- Lĩnh vực
- frontend
Hướng nghiên cứu
Bắt đầu với ví dụ BugRepro được cung cấp và tái hiện lỗi bằng cách sử dụng DragDropSort bên trong MenuContainer và Menu. Đọc các entry point của DragDropSort và component menu để theo dõi hành vi rerender, sau đó xác minh rằng việc mở và sử dụng menu không còn gây ra lỗi hiển thị đã được báo cáo.
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Mô tả
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
- Ngôn ngữ chính
- TypeScript
- Star
- 862
- Fork
- 392
- Merge trung bình
- 4 ngày 8 giờ
- Pull request đã merge (30 ngày)
- 9
Hướng dẫn đóng góp
Bắt đầu từ đâu
- Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
- Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
- Fork repository và làm thay đổi trên một nhánh.
- Mở pull request có tham chiếu số hiệu của issue.
Issue khác của patternfly/patternfly-react
-
PF Team
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 68/100
patternfly/patternfly-react#12651 ·
-
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 78/100
patternfly/patternfly-react#12637 ·
-
PF Team
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 72/100
patternfly/patternfly-react#12617 · 1 bình luận ·
-
PF Team
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 68/100
patternfly/patternfly-react#12610 · 1 bình luận · 1 reaction ·
-
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 68/100
patternfly/patternfly-react#12600 ·
Tất cả issue của patternfly/patternfly-react
Issue tương tự
-
Type/Bug
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 78/100
OpenNSW/nsw-srilanka#497 ·
-
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 72/100
0xMiden/bridge-portal#132 ·
-
react-doctor severity:warning tech-debt
Độ khó 1/5 Dưới một giờ Mức phù hợp với người mới 88/100
digidem/comapeo-cloud-app#403 ·
-
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 72/100
-
Độ khó 2/5 1-3 giờ Mức phù hợp với người mới 78/100