DndContext reducers all point to the same initial state variable, which is causing id collisions across nested and sibling providers

Hi, First of all, great job building this. It’s an awesome library.

I am facing a problem with a use case where I have a nested structure. Can you please help resolve this?

I have a structure similar to the following:

<DndContext>
   <div>
        <Draggable />
        <Draggable />
        {/* multiple draggable items */}
    </div>

    <div>
          <Droppable>
             <DndContext>
                  <SortableContext>
                        <SortableItem />
                        <SortableItem />
                        {/* multiple sortable items */}
                  </SortableContext>
             </DndContext>
         </Droppable>

        <Droppable>
             <DndContext>
                  <SortableContext>
                        <SortableItem />
                        <SortableItem />
                        {/* multiple sortable items */}
                  </SortableContext>
             </DndContext>
         </Droppable>
         {/* Multiple similar droppable items */}
    </div>
</DndContext>

Now, I am able to move the draggable items to droppable zones. But the events are not being detected when trying to sort items in the individual droppable zones. I assume it is something related to event bubbling, but not sure. Any help in this regard will be appreciated. Thanks 🙏

Codesandbox Link: https://codesandbox.io/s/dnd-kit-gm09q?file=/src/App.js

Demo: https://user-images.githubusercontent.com/17903466/104116991-a325a680-5343-11eb-96e0-469b168f83dd.mov

EDIT: In the same codesandbox, add an empty section and try to add Page 12 to it before anything else. It isn’t getting added. I don’t know if I am missing something here.

[clauderic]

The fix has shipped in @dnd-kit/core^1.0.1, let me know if you run into other issues related to unexpected id collisions

[clauderic]

Hey @pbteja1998, I haven’t had time to look in-depth into the root cause of the issue in your case, that is, whether it is an issue in the library or a consumer error, but from what I can tell it appears like there was an id collision with your sortable items. I updated the id of the sortable items to something like sortable-${id} which seems to have resolved the collision. More investigation will be required though.

https://codesandbox.io/s/dnd-kit-forked-hhfkk?file=/src/App.js

As for the issue with pages that are scrolled in the sidebar, it’s an issue that was reported here and for which a fix is in progress: #43