Trouble with Antd Menu

[Yurii Sydarskii]

In a working project, I need to wrap the and menu component in a bdnd. Having tried to do this, I got unpleasant behavior. The bdd logic works correctly, but the visual component does not. I've been fighting for a couple of days and I can't find a solution. I'm attaching a visual example. Try dragging the bottom Item up and others. How can this be overcome?

https://codesandbox.io/p/sandbox/antd-menu-with-beautiful-dnd-fmkgt8?file=%2Fdnd.js

[Yurii Sydarskii]

The problem looks like this. When we use the extreme version of antd, where it is required to pass items in the menu with a pass, then you can wrap "Draggable" only with "label", it turns out that you can view in the sandbox. I tried using the Menu - Menu inside.Item even though it has been abolished. In this case, the bdnd works correctly, but the logic of the Item allocation breaks.

here bdnd work but try touch item

https://codesandbox.io/p/sandbox/antd-menu-with-beautiful-dnd-forked-jsygww?file=%2Fdemo.js%3A81%2C43

[Yurii Sydarskii]

I managed to find one solution, tomorrow is the working day I need to make a working version. An unobvious solution, but I found an indication about eventKey, it turned out to be applicable to Item. I will cut in this form, if anyone needs it briefly like this:

    <Menu>
        <DragDropContext>
              <Droppable>
                  <Draggable>
                      <Menu.Item eventKey={1}>Option 1</Menu.Item>
                  </Draggable>
                  <Draggable>
                      <Menu.Item eventKey={2}>Option 2</Menu.Item>
                  </Draggable>
               </Droppable>
        </DragDropContext>
    </Menu>