Topic: MDBSortable won't work on mapped lists
Original behavior
MDBSortable is a component that belongs to the Drag-and-drop plugin from MDBReact 5.1.0 ProWhen using MDBSortableElement they can be sorted by draging them
What's special in my code?
I have an array of items to be displayed in a list, being loaded from a JSON File. Once loaded in a variable, I expect this list to be rendered as a list of sortable items.
Expected behavior
The dynamically loadad map of MDBSortableElements should be able to be sortable when inside MDBSortable component.
Actual behavior
The items are rendered, but when trying to drag them, they are not dragged at all.
Resources (screenshots, code snippets etc.)
import React from 'react'
import { MDBSortable, MDBSortableElement } from 'mdb-react-drag-and-drop';
export default function Example() {
const fields = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
return (
<MDBSortable>
{
fields.map((field, index) => {
return (
<MDBSortableElement
key={index}
>
{index}
</MDBSortableElement>
)
})
}
</MDBSortable>
)
}
Edit: I just confirmed that MDBSortableElement won't work as expected as long as they are inside of .map function. No matter the source of the list.
Grzegorz Bujański staff commented 2 years ago
Unfortunately, I am unable to reproduce this error. I used the code you sent and everything works fine. What exact version of Google Chrome are you using? Are you getting any errors in the console?
genkaistudiodev commented 2 years ago
I'm using Google Chrome 111.0.5563.147
No error in the console!
Grzegorz Bujański staff commented 2 years ago
I am using the same version of google chrome and sorting works fine. Maybe there is something else in your project that affects our component? Any extra styling or other libraries that conflicts with our package? Are you able to provide me with a repo with a basic project that will have this issue? Of course, without the link to the MDB package in package.json or the src files of our component.
genkaistudiodev commented 2 years ago
https://github.com/genkaistudiodev/form-builder-example
All sources of MDBBootstrap were deleted It uses the drag and drop plugin (plugin folder) and the mdb toolkit 6.0.0
Grzegorz Bujański staff commented 2 years ago
Thanks. There seems to be a bug in the plugin. After adding new elements, events do not bind to newly created elements. That's why sorting doesn't work. We will fix it as soon as possible.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB React
- MDB Version: MDB5 6.0.0
- Device: PC
- Browser: Google Chrome
- OS: Windows 11
- Provided sample code: No
- Provided link: No