Topic: MDBSortable won't work on mapped lists

genkaistudiodev free asked 11 months ago


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>
  )
}

genkaistudiodev free answered 11 months ago


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 11 months 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 free commented 11 months ago

I'm using Google Chrome 111.0.5563.147

No error in the console!


Grzegorz Bujański staff commented 11 months 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 free commented 11 months 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 11 months 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.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: 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