Support for nested scroll containers

[alexreardon]

Adding support for n-level deep scroll containers. Currently, only a single level is supported

Current plan

This plan will allow for nested scroll containers, and also improve the performance of scroll updates

Collection (drag start)

• Grab all of the Droppable elements
• Take the first one and walk up the DOM tree. If the element is a scroll container then add a data-* attribute to it. (eg data-react-beautiful-dnd-scroll-container=${index}). Cache the element and its result during the collection
• When the node.parentElement is null then move onto the next Droppable. If an element is found that has previously been investigated then skip the rest of the upwards search. Use any previously found scroll parent ancestry.
• When visiting an element an we also need to check to see if the element is position:fixed for our position:fixed support

Storage while dragging

• When storing a Droppable we will keep a map (or linked list) that registers a Droppables scroll containers.
• A droppable's frame will need to be updated when any of the ancestry changes
• When calculating droppable displacement internally, all of the ancestry will need to be taken into account

Updates (scroll events)

A single scroll listener is added to the window as a capture:true listener. This will capture all scroll events.

• If the source of a scroll event is a scroll container that has a data-react-beautiful-dnd-scroll-container attribute then trigger an action to update all relevant Droppables. One redux update for all Droppables (fixes Performances and scrolling issues  #244). The internal algorithms will need to be updated to account for 0 <-> many scroll containers
• If a scroll is on the window then trigger a window scroll action. Currently, this is handled by the drag handles. Drag handles will no longer handle this
• If the source of a scroll event is a scroll container that is NOT a data-react-beautiful-dnd-scroll-container then it can be ignored

Auto scrolling

• There will need to be some investigation into how this will work.
• Need to investigate how our push scroll holds up when moving with a keyboard

Clean up (drag end)

• Remove all of the data-react-beautiful-dnd-scroll-container attributes
• Remove single window event listener

Bonus

• We could keep the scroll listeners active while a drop animation is occurring and flush any drop animations

[alexreardon]

Given the complexity in supporting a single level, I think this is out of scope for now!

[humphreybc]

@alexreardon Does this issue affect Core boards / Jira Software boards? I'm trying to improve our board experience in Dovetail and running into a lot of issues that seem to be caused by this one. I would love to know a little bit about how the Core / Software teams have tackled this.

[goldo]

Hi @alexreardon,
We just bumped to 8.0.1 🎉 and are noticing this warning. We have a horizontal scrollable board with vertical columns. It is no problem for us that we can't drag, then horizontal sroll, then drop at the right place, but we would like to clear this console warning, even in development mode. Is that possible ?

Thanks

[mtsc-rrapiteanu]

I am running into this issue too (scrollable columns + horizontal scroll on the board). I think it would be very helpful if you could tackle this in the near future. Thank you!

[alxtz]

Doesn't quite understand this issue, the long lists in a short container seems to work fine

Also, agree to @goldo, spamming too much console.warn() in the codebase isn't healthy

[sis]

@alxtz Nested scroll containers would mean that you can vertically scroll through individual columns whilst having another parent scroll container as right now you can't.

[alexreardon]

@goldo perhaps we could add an option to opt out of all warnings - even in development? 🤔

[goldo]

Hmm might be dangerous wouldnt it ? Id like to know if there is a warning in dev mode, but if i understand it and I accept it, I would like to get rid of it. Maybe disabling only this warning would be best ?

…

On 3 Aug 2018 at 07:05 +0200, Alex Reardon ***@***.***>, wrote: @goldo perhaps we could add an option to opt out of all warnings? 🤔 — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[alxtz]

@goldo would making the disableWarning option to be true by default solve your concern?

[goldo]

@alxtz like I said, I think warnings are useful, specially in case of bumps, so I would prefer not to remove all the warnings. In this case, we are totally OK with this issue, it's not a problem at all, in our application. That's why we would like to remove only this specific warning, and keep all the others.
If it's too complex to do, I think we will keep all the warnings, just in case of problems (at least in dev mode)

[jebarjonet]

This issue is a real problem for Kanban/Trello like apps (a big use case for D&D apps I guess?). The warning is very nice, but it is pretty unclear before making an app, you realize it when it is too late. I hope this will be fixed in the near future though 🙏

[wesleywong]

an option to opt out of all warnings will be good. Too much warning while the functionality work as per normal.

[IsenrichO]

@jebarjonet brings up a great point. I'd echo others' points that the option to opt out would be highly appreciated!

[dylmye]

Would it be okay for me to make a PR implementing this opt-out functionality? Should I open a new issue for it?

[bmz1]

Hi @alexreardon,

are you planning to implement this feature in the near future?

[alexreardon]

We have a dev warning opt out coming in v10

…

On Thu, 25 Oct 2018 at 1:49 am, Boér Máté ***@***.***> wrote: Hi @alexreardon <https://github.com/alexreardon>, are you planning to implement this feature in the near future? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#131 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ACFN7RipwmL8IBPWNBqOOuCr8kUSykoeks5uoH3dgaJpZM4PrKeZ> .

[kole]

Just to clarify the core of this issue (not the dev warning complaints)... it is currently impossible to create a Trello clone (for example) with this library because you cannot have scrolling columns and a horizontally scrolling board container.

[abhishekpolampally]

Any updates on this, I am able to scroll the container by using the mouseMove attribute on the scroll container, but the drag and drop feature doesn't work for the any region except the columns which were in the viewport before the scroll. How can I inform the library that the list has scrolled horizontally

[InstantHuman]

POSSIBLE SOLUTION to 'NESTED SCROLLING CONTAINER DETECTED' error
This fix only applies if Overflow-X or Overflow-Y is being set on any parent container of the Droppable container

A fellow react developer and myself just spent several hours trying to solve this one.
Here is what we discovered.

OUR SETUP
We are using 'react-beautiful-dnd' with a 'react-virtualized' list, and using 'ant-design' as our UI Library.

WHAT TRIGGERS THE ERROR:
==> IF a parent to the Droppable container has Overflow-X or Overflow-Y set to (hidden or auto), without also setting the other 'X' or 'Y' to hidden. THEN react 'assumes on its own' and auto-sets the one you DID NOT SET, (either Overflow-Y or Overflow-X) to 'auto' ...triggering the error.

It is automatically setting the one you did not set, to 'auto', turning the parent into a 'Scrolling Container'.

TO FIX THIS:
- In our case, we removed the Overflow-X (hidden or auto) style from the parent container, and replaced it with (Overflow: 'hidden'). You could also just ensure that NO OVERFLOW setting is set, or set BOTH overflow X & Y to 'hidden'.
- Just DO NOT set one without the other!

[AlexNguyenInts]

POSSIBLE SOLUTION to 'NESTED SCROLLING CONTAINER DETECTED' error This fix only applies if Overflow-X or Overflow-Y is being set on any parent container of the Droppable container

A fellow react developer and myself just spent several hours trying to solve this one. Here is what we discovered.

OUR SETUP We are using 'react-beautiful-dnd' with a 'react-virtualized' list, and using 'ant-design' as our UI Library.

WHAT TRIGGERS THE ERROR: ==> IF a parent to the Droppable container has Overflow-X or Overflow-Y set to (hidden or auto), without also setting the other 'X' or 'Y' to hidden. THEN react 'assumes on its own' and auto-sets the one you DID NOT SET, (either Overflow-Y or Overflow-X) to 'auto' ...triggering the error.

It is automatically setting the one you did not set, to 'auto', turning the parent into a 'Scrolling Container'.

TO FIX THIS: - In our case, we removed the Overflow-X (hidden or auto) style from the parent container, and replaced it with (Overflow: 'hidden'). You could also just ensure that NO OVERFLOW setting is set, or set BOTH overflow X & Y to 'hidden'. - Just DO NOT set one without the other!

Does it really work well? Can you handle the problem?

[murrayee]

6 years have passed

[rayronvictor]

There is hope!

https://twitter.com/alexandereardon/status/1696333254444695877

[klaytoncavalcante]

I'm sorry for bringing bad news, but sadly it's not react-beautiful-dnd. It's something else.

https://twitter.com/alexandereardon/status/1697009629799305554
https://www.youtube.com/watch?v=5SQkOyzZLHM

I don't think this library is even being maintained right now, as the readme mentions: https://github.com/atlassian/react-beautiful-dnd

The latest release was in Aug 30, 2022, and there are at the time of writing this comment, 74 pull request, the oldest being from 2019.

It's really sad indeed. This is a good lib.

My personal recommendation is dnd-kit, that has support for nested scrolling, as they have this working example:
https://5fc05e08a4a65d0021ae0bf2-ipdskkittb.chromatic.com/?path=/story/presets-sortable-multiple-containers--many-items

As I said in my previous comment in this thread, I'm not trying to be disrespectful at all. I really see react-beautiful-dnd as an amazing work, but I've lost the faith that this old issue is going to be fixed someday.

[abhay187]

Good news Guys Pragmatic Drag and Drop is available in Early Access https://www.npmjs.com/package/@atlaskit/pragmatic-drag-and-drop.
https://www.youtube.com/watch?v=5SQkOyzZLHM

Edit:-
Saidly Docs are not live so we really can't use it.

[rayronvictor]

And we'll have a migration guide from RBD -> Pragmatic DND

https://bitbucket.org/atlassian/atlassian-frontend-mirror/src/master/pragmatic-drag-and-drop/react-beautiful-dnd-migration/README.md

[abhay187]

Hello @alexreardon When will the docs be available. Eagerly waiting to use it. https://atlassian.design/components/pragmatic-drag-and-drop/.

Or tell me how I can run docs locally using this package https://www.npmjs.com/package/@atlaskit/pragmatic-drag-and-drop-docs.

Thanks a lot.

[abhay187]

@rayronvictor Here is some of the official examples with source code. In case anyone is looking for example https://pragmatic-drag-and-drop-examples.netlify.app/

[AlexxMart]

The package @atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-migration totally worked for me. I found the info I needed here.

Docs

[alexreardon]

@abhay187 the docs for Pragmatic drag and drop will hopefully be public by the end of this year. I also plan on giving consumers of react-beautiful-dnd a large written update at that time as well

[obedparla]

I confirm @InstantHuman solution works. I had ovewflow-y: auto set by a Material UI's container and setting it to overflow: initial removed the warning. I tried overflow: auto but that still triggered the warning.

[gabberr]

Thank you for the work on the migration atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-migration.
Does anyone know why it's peerDependencies are different than for react-beautiful-dnd ?

    "react": "^16.8.5 || ^17.0.0 || ^18.0.0",
    "react-dom": "^16.8.5 || ^17.0.0 || ^18.0.0"

Versus migration:

    "react": "^16.8.0",
    "react-dom": "^16.8.0"

We are using react 17 and a newer version of npm (without the legacy peer install), so we cannot install the migration package because of this.

[githorse]

@InstantHuman et al - could somebody post a sample of this solution? I've tried putting a div (actually, a MUI Box) with overflow: "hidden" (and overflow: "initial") as the immediate parent of both Droppable and of DragDropContext, and I'm still seeing this error.

[ronyfhebrian]

Can't believe this PR is older than my children

[MRLinhNB]

any way to fix this issue guys ?

[Abdukhaligov]

Rolled back to version 10. Works fine for me

[2003aryansingh]

One thing that i am really curious about is ...
How did the Trello Team workaround this issue ? I mean they use the same library right ?

[subratre]

@alexreardon could you please share the solutions for the nested scrolling issue? Additionally, you mentioned providing pragmatic drag and drop documentation along with a written update for react-beautiful-dnd?

[davidlygagnon]

Yes +1 to the comment above! Would love to hear about this:

I also plan on giving consumers of react-beautiful-dnd a large written update at that time as well

[marlibon]

Dear @alexreardon ,

I visit this place every week hoping to see the long-awaited solution to the issue. I truly hope that you will find the time for this. Thank you for the work you have already done; it is truly impeccable. However, this option does not allow us to fully utilize the boards in swimlane mode.

Thank you.

[marlibon]

Hello, @alexreardon,

I keep coming back here and really hope that you will take the time to help solve the problem or point me in the right direction for finding a solution.

[muhammedaksam]

Rick Astley - Never Gonna Give You Up (Official Music Video)

[shamseer-ahammed]

+1