search

isaacHagoel / svelte-dnd-action

An action based drag and drop container for Svelte
MIT License
1.67k stars 100 forks source link

Drop right when page/viewport scrolling will persist the scrolling #564

Closed Acylation closed 5 days ago

Acylation commented 1 month ago

Firstly thanks for your awesome package!

I've built a kanban board with svelte and dnd-action, however, sometimes when I scroll down with the dragged card and drop it quickly, the viewport would scroll all the way to the bottom, and preventing other normal scrolls.

After some investigation, the problem was narrowed. Here's the REPL link, adpat from the Super basic, single list, with animation sample. Hard to reproduce though, since we need to carefully place the dragged card at the edge of scrolling area and release it quickly. https://svelte.dev/repl/1004983c988540e29075fc7868e147ec?version=3.59.2

If the page got stuck, you can refresh to experience the problem again.

Multiple

isaacHagoel commented 1 month ago

Interesting. Do you see any errors in the console? which browser and which OS are you using?

Acylation commented 1 month ago

The console stays silence in default level but there are some messages logged in the verbose level only when initializing the page.

15[Violation] Added non-passive event listener to a scroll-blocking event. Consider marking event handler as 'passive' to make the page more responsive. See

This problem is observed on both Microsoft Edge (124.0.2478.51) and Chrome (124.0.6367.78) with the aforementioned REPL. My kanban board is built upon Obsidian, an electron based desktop app.

Operating system: Windows 10 Home China 10.0.19045

marchellodev commented 1 week ago

Also facing the same exact problem

isaacHagoel commented 1 week ago

I couldn't reproduce the issue. Can you please check with version 0.9.40 and let me know if it still happens (the scrolling logic changed in version 0.9.41 and I want to know if that change introduced the issue)?

On Sun, May 26, 2024, 07:31 Mark Motliuk @.***> wrote:

Also facing the same exact problem

— Reply to this email directly, view it on GitHub https://github.com/isaacHagoel/svelte-dnd-action/issues/564#issuecomment-2131479022, or unsubscribe https://github.com/notifications/unsubscribe-auth/AE4OZC5VDHZIIJJHC2RAZ6TZED7LTAVCNFSM6AAAAABGXV6K26VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCMZRGQ3TSMBSGI . You are receiving this because you commented.Message ID: @.***>

marchellodev commented 1 week ago

@isaacHagoel thank you for such a quick response!

In 0.9.40 there is no autoscroll when the dragged element is approaching the viewport border. hence, the issue does not exist in 0.9.40

0.9.40: https://github.com/isaacHagoel/svelte-dnd-action/assets/61112084/10a8bd15-9e62-44a4-93e4-e71da727f973

0.9.47 (the scroll bug can be observed near the end of the recording):

https://github.com/isaacHagoel/svelte-dnd-action/assets/61112084/48eb9434-aef2-4138-9223-73858fdc0083

isaacHagoel commented 1 week ago

Mmm... 0.9.40 does have scrolling when the item is near the edge of the viewport, I wonder why it doesn't work in this case but let's focus on the 0.9.47 issue. Does it reproduce for you on a repl? If yes, can you include a repl link?

On Sun, May 26, 2024, 08:18 Mark Motliuk @.***> wrote:

@isaacHagoel https://github.com/isaacHagoel thank you for such a quick response!

In 0.9.40 there is no autoscroll when the dragged element is approaching the viewport border. hence, the issue does not exist in 0.9.40

0.9.40:

https://github.com/isaacHagoel/svelte-dnd-action/assets/61112084/10a8bd15-9e62-44a4-93e4-e71da727f973

0.9.47 (the scroll bug can be observed near the end of the recording):

https://github.com/isaacHagoel/svelte-dnd-action/assets/61112084/48eb9434-aef2-4138-9223-73858fdc0083

— Reply to this email directly, view it on GitHub https://github.com/isaacHagoel/svelte-dnd-action/issues/564#issuecomment-2131554896, or unsubscribe https://github.com/notifications/unsubscribe-auth/AE4OZC5XECR6HRK7AJJAJ63ZEEE3ZAVCNFSM6AAAAABGXV6K26VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCMZRGU2TIOBZGY . You are receiving this because you were mentioned.Message ID: @.***>

marchellodev commented 6 days ago

@isaacHagoel The issue is reproducible in an original repl (by @Acylation): https://svelte.dev/repl/1004983c988540e29075fc7868e147ec?version=3.59.2

Acylation commented 6 days ago

Yes I confirm that in v0.9.40 I can't perform auto scroll. In v0.9.47 the problem is still there. An addtion, I tested the REPL with iOS safari and it will also show the problem.

https://github.com/isaacHagoel/svelte-dnd-action/assets/73122375/c0b89ae2-5160-4fe2-bd70-15728e34e4e1

isaacHagoel commented 6 days ago

Okay. I managed to reproduce it on my android phone (but I can't reprod on desktop browsers). I will have a look

On Mon, May 27, 2024 at 3:56 AM Chiyu Liang @.***> wrote:

Yes I confirm that in v0.9.40 I can't perform auto scroll. In v0.9.47 the problem is still there. An addtion, I tested the REPL with iOS safari and it will also show the problem.

— Reply to this email directly, view it on GitHub https://github.com/isaacHagoel/svelte-dnd-action/issues/564#issuecomment-2132299605, or unsubscribe https://github.com/notifications/unsubscribe-auth/AE4OZC26OFRHYXZED7IXTPTZEIO3XAVCNFSM6AAAAABGXV6K26VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCMZSGI4TSNRQGU . You are receiving this because you were mentioned.Message ID: @.***>

isaacHagoel commented 5 days ago

I deployed a fix and verified it on my phone. Please give version 0.9.48 a try and let me know if there are any issues. Apologies for the delay.

Acylation commented 5 days ago

Yeah it works fine. I can feel the scrolling paused a little bit for each viewport length and no more stuck is found. Thanks for the fix and all the efforts for the wonderful package!