MDBSortable won't work on mapped lists

Topic: MDBSortable won't work on mapped lists

genkaistudiodev free asked 1 year 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>
  )
}

Add comment

genkaistudiodev free answered 1 year ago

0 0 Best answer

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 1 year 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 1 year ago

I'm using Google Chrome 111.0.5563.147

No error in the console!

Grzegorz Bujański staff commented 1 year 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 1 year 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 1 year 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.

Add comment

Write

Create snippet

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

genkaistudiodev

0Support score
2Questions 1Answers 0Snippets