Hacktoberfest 2026:维护者为十月标记出来的 issue,仍然开放、适合新手。 浏览 Hacktoberfest issue

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

未关闭
#12,612 3 条评论 1 个 reaction 已指派 0 人 在 GitHub 查看

还没有人认领这个 Issue。

评估

难度
3/5
预计耗时
1-2 天
新手友好度
55/100
Issue 类型
缺陷
描述清晰度
基本清楚
活跃度
冷清
技术栈
react, typescript
领域
frontend

调研方向

从提供的 BugRepro 示例开始,使用 MenuContainer 和 Menu 内的 DragDropSort 重现该故障。阅读 DragDropSort 和菜单组件的入口点,以追踪重新渲染行为,然后验证打开并使用菜单不再导致报告的视觉故障。

由索引模型根据 Issue 内容生成。

描述

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

主要语言
TypeScript
星标
862
派生
392
平均合并
4 天 8 小时
30 天内合并 PR
9

贡献指南

打开贡献指南

从这里开始

  1. 先读完整个 Issue,再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库,在一个分支上完成修改。
  4. 提交 Pull Request,并在描述里引用这个 Issue 编号。

patternfly/patternfly-react 的其他 Issue

查看 patternfly/patternfly-react 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。