primefaces
p-picklist drag drop very glitchy since 19.x
Describe the bug
Prior to v19 upgrade the drag-drop functionality worked great for this page, however since, unless there are a couple of items already in the target list, the drag-drop does not work.
there are no errors, and nothing logged from (onMoveToTarget) etc.
It should be noted the same issue exists when dragging back from the target list to the source list.
https://github.com/user-attachments/assets/c8b4fb73-e018-4336-aa2e-33f0bc947ed3
Pull Request Link
No response
Reason for not contributing a PR
- [ ] Lack of time
- [x] Unsure how to implement the fix/feature
- [x] Difficulty understanding the codebase
- [ ] Other
Other Reason
No response
Reproducer
https://stackblitz.com/edit/github-ehanj7h2
Environment
Windows 10, Angular 19.1.5, Node 20.15 . VS Code
Angular version
19.1.5
PrimeNG version
v19.0.9 (But any 19 version does this)
Node version
20.15.0
Browser(s)
Chrome
Steps to reproduce the behaviour
Attempt to drag and drop some items before adding any using buttons, note the item will fail to move over.
Add 3 items using the buttons, then try and drag 4th item, it will work.
Expected behavior
Drag-Drop functionality should work from Source to Target without 3 existing items in the target list. Drag-Drop functionality should work from Target to Source without 3 existing items in the source list.
The listbox container is not ineriting the minimum height. Add in your css:
.p-listbox-list {
min-height: 10rem; // or whatever size you want
}
I am also experiencing this using primeng 19.0.10. It appears that the dropzone is only as high as the element containing items. I can get it to work with one item on the right if I drop directly on that item. I can't drop below at all.
The listbox container is not ineriting the minimum height. Add in your css:
.p-listbox-list { min-height: 10rem; // or whatever size you want }
I tried this workaround on https://primeng.org/picklist, and while an item could be dragged, the item would disappear when the drag was completed.
The listbox container is not ineriting the minimum height. Add in your css: .p-listbox-list { min-height: 10rem; // or whatever size you want }
I tried this workaround on https://primeng.org/picklist, and while an item could be dragged, the item would disappear when the drag was completed.
I had it tested on 19.0.9 and it worked for me, it seems there some small patches you can see on the stackblitz posted on the main thread https://stackblitz.com/edit/github-ehanj7h2 .
L.E.
I've had a quick look. It seems that when using the event.container and event.previousContainer, if one of the containers has no items, the local source or target is not updated
1495: transferArrayItem(event.previousContainer.data, event.container.data, dropIndexes.previousIndex, dropIndexes.currentIndex);
to
transferArrayItem(this.target, this.source, dropIndexes.previousIndex, dropIndexes.currentIndex);
and
1519: transferArrayItem(event.previousContainer.data, event.container.data, dropIndexes.previousIndex, dropIndexes.currentIndex);
to
transferArrayItem(this.source, this.target, dropIndexes.previousIndex, dropIndexes.currentIndex);
and added this styles to listbox component, to make sure the dropbox is as big as the container.
.p-listbox-list, .p-listbox-empty-message {
min-height: 100%;
}
The "quick fix" for this you will have to modify the npm package... Or extend the component and modify onDrop
Same issue for me, if the target or source list is not empty it works. But if one of the list is empty, when I drop the item it disappears
I have the same issue, primeng: v19.1.3
The temporary solution that I use is to add an empty element to the selected list
if (this.selectedItems.length === 0) {
this.selectedItems.push({ id: '', number: '' });
}
and remove this element when adding something.
fixed in https://github.com/primefaces/primeng/commit/591b02e5aff5f2011b7ff6b939b8e7ba77865cf1
