oui

oui copied to clipboard

Describe the bug

When an OUI drag and drop container implementation is built inside an OUI accordion, the drag position is skewed and cannot select the position correctly. See attached video

To Reproduce Steps to reproduce the behavior:

1. Create OUIAccordian
2. Inside it add Drag and Drop containers
3. Try to implement drag and drop

Expected behavior

The drag and drop should work inside accordions too

Screenshots

Without Accordion (works)

https://github.com/opensearch-project/oui/assets/20453492/f8633efd-b709-49d1-a0ad-0bea8ad6ef0f

With accordion (Bug)

https://github.com/opensearch-project/oui/assets/20453492/bbc2328e-eb0d-4b4d-a277-1cef895a0d0b

Host/Environment (please complete the following information):

• OUI Version: [e.g. 1.0]
• OSD Version (if applicable): [e.g. 2.7.0]
• OS: [e.g. iOS]
• Browser and version [e.g. Chrome 90]

Additional context

Add any other context about the problem here.

I would be interested in taking a look at this bug, if it's still a live issue. I'll have plenty of questions, I'm sure, but I would definitely like to explore this issue and see what I can do to fix it.

I assigned it to you. I'm not super familiar with the drag & drop implementation, but it seems like it makes a lot of usage of css translates. What it looks like is going on is that the anchor point of the draggable item is not being properly calculated for some reason.

It may be helpful to add a section on the docsite temporarily to test this specific case, while you're debugging/fixing.