Antd Menu with Beautiful-dnd trouble

60 Views Asked by At

In a working project, I need to wrap the and menu component in an ivt. 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. Disappear on hover. How can this be overcome?

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

1

There are 1 best solutions below

0
On

I managed to find one solution, 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:

        <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> ```