search

ValentinH / react-easy-sort

A React component to sort items in lists or grids
https://ValentinH.github.io/react-easy-sort
MIT License
160 stars 25 forks source link

Doesn't work with images on Firefox and Safari #10

Closed pedroBruno7 closed 3 years ago

pedroBruno7 commented 3 years ago

Good work btw !

Describe the bug On Firefox (Window and Mac) and Safari (Mac and Iphone), the drag has a weird behavior when the item has an image inside. Gets blocked

To Reproduce Just drag on the sandbox bellow

Expected behavior It should drag normally and not get stuck

Your own sandbox here: https://codesandbox.io/s/react-easy-sort-images-demo-486qk?file=/src/App.tsx Try it on Firefox on a Computer

ValentinH commented 3 years ago

Good catch! It was actually because the item class was missing the pointerEvents: "none" part. I fixed the sandbox.

It's something that I removed from the sandbox when releasing this library because I thought it was useless but it was actually to support these browsers 😅

Could you please confirm that it fixes your issue?

ValentinH commented 3 years ago

I'm not on the computer anymore but I think the pointer event property should be set on the image instead of the item. Otherwise, it will block the click on the button.

pedroBruno7 commented 3 years ago

Thanks for the fast reply 🚀 I ended solving it with pointer-events as well yes But I think it's not the most elegant solution since it prevents clicks, having cursor pointer and other issues with anchors (solved it with wrapper divs around elements and using js to redirect).

I wonder if it would be possible to be the package itself solving this issue like it does in chrome. It would be nice if out of the box worked on all browsers. I don't know how it could be fixed

Even without that fix it could be nice to add on read.me a note about pointer-events and how it need to be added if we use images, anchors and other stuff

Thank you 🙂

ValentinH commented 3 years ago

Following my last comment, I updated the sandbox and now the button works fine and the drag as well on Firefox/Safari.

As the library cannot control what's rendered in the SortableItems, I don't want to add these properties by default. However, I'll add a section to the documentation about pointer-events: none and user-select: none.

Edit: see https://github.com/ricardo-ch/react-easy-sort#recommended-css-rules

pedroBruno7 commented 3 years ago

Thanks for the update in the docs 💪 Keep up the good work Best Regards