patternfly / patternfly/patternfly-react

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

Ouverte
#12,612 3 commentaires 1 réaction 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

Langage dominant
TypeScript
Étoiles
862
Forks
392
Merge moyen
4 j 8 h
PR mergées (30 j)
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

Guide de contribution

Ouvrir le guide de contribution

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Piste de recherche

Commencez par l’exemple BugRepro fourni et reproduisez le problème en utilisant DragDropSort dans MenuContainer et Menu. Lisez les points d’entrée de DragDropSort et du composant de menu pour suivre le comportement du rerender, puis vérifiez que l’ouverture et l’utilisation du menu ne provoquent plus le problème visuel signalé.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
react, typescript
Domaine
frontend
Type d'issue
Bug
Difficulté
3/5
Temps estimé
1-2 jours
Activité
Calme
Clarté
Plutôt claire
Accessibilité débutants
55/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.