patternfly / patternfly/patternfly-react
Bug - DragDropSort - Visual glitch whenever using DragDropSort inside of a Dropdown/Menu/Select
Nadie ha tomado este issue todavía.
- Lenguaje dominante
- TypeScript
- Estrellas
- 862
- Forks
- 392
- Merge medio
- 4 d 8 h
- PR fusionados (30 d)
- 9
Descripción
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
Guía de contribución
Primeros pasos
- Lee el issue completo y luego la guía de contribución del proyecto.
- Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
- Haz un fork del repositorio y trabaja en una rama.
- Abre un pull request que haga referencia al número del issue.
Línea de trabajo
Empieza con el ejemplo BugRepro proporcionado y reproduce el fallo usando DragDropSort dentro de MenuContainer y Menu. Lee los puntos de entrada de DragDropSort y del componente de menú para rastrear el comportamiento de rerenderizado y, después, verifica que abrir y usar el menú ya no provoque el problema visual reportado.
Escrito por el modelo de indexación a partir del texto del issue.
Evaluación
- Stack tecnológico
- react, typescript
- Área
- frontend
- Tipo de issue
- Error
- Dificultad
- 3/5
- Tiempo estimado
- 1-2 días
- Estado de actividad
- Tranquilo
- Claridad
- Bastante claro
- Aptitud para principiantes
- 55/100