OrderList: Drag & drop is not working

[szabsi]

I'm submitting a ... (check one with "x")

[x] bug report
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://forum.primefaces.org/viewforum.php?f=57

Codesandbox Case (Bug Reports) Please fork the codesandbox below and create a case demonstrating your bug report. Issues without a codesandbox have much less possibility to be reviewed.

https://www.primefaces.org/primereact/showcase/#/orderlist

Current behavior Cannot drag items on list although dragdrop prop is present.

Expected behavior

Should work like in PrimeNG: https://www.primefaces.org/primeng/showcase/#/orderlist

Minimal reproduction of the problem with instructions

Just enter the documentation page of OrderList

Please tell us about your environment:

Windows 10

• React version:

whatever version is on your website

• PrimeReact version:

whatever version is on your website, probably 6.2.1 now

• Browser: Chrome 89.0.4389.82

• Language: es6

[AlexanderParker]

Replication and potential fix:

Can confirm the issue on primereact 6.5.0 as well, Windows 10, Google Chrome Version 92.0.4515.159 (Official Build) (64-bit) (language Javascript, using React Hooks)

Both my code and the example on the PrimeReact demo page seem to be affected by this issue https://primefaces.org/primereact/showcase/#/orderlist

I did some further investigation and it appears that the element ".p-orderlist-droppoint" has a height of zero, so there's no physical drop point when dragging the item.

When I set a height such as 20px to .p-orderlist-droppoint, the drag and drop functionality works again, both for the official demo and on my local project.

Hopefully this helps out.

Edit - Did some more testing, and while adding a height to the droppoint makes it possible to drag and drop an item, the resulting ordering of the items is inconsistent - items do not end up in the order they are dropped. I'm not sure if that should be a separate issue or if this is all connected.

[gfeller]

Note: Same component works in primeng

[cthomesmatt]

Any news on when this fix will be implemented?

[matthew-harvell]

I just pulled the most recent version of this and it has not yet been fixed. As noted, it does work in PrimeNG and PrimeFaces for JSF. Is there an ETA on this, please?

[melloware]

If you can look at PrimeNG or PrimeVue that is working and submit a PR that would be awesome!

[on2air]

I can confirm this is still not working. Sample sandbox (copied from demo site and updated with latest primereact/primeflex versions):

https://codesandbox.io/s/zealous-feather-146ihq?file=/src/demo/OrderListDemo.js

[melloware]

Yep no one has submitted any PR or fix.

[melloware]

I fixed both the drag and drop and the problem where the drop point was off by 1.