Skip to content

Droppable and Draggable ignore children classname #6593

@rvsia

Description

@rvsia

Describe the issue. What is the expected and unexpected behavior?

Droppable(here) and Draggable (here) overwrites children classname and so the classname is being ignored.

Please provide the steps to reproduce. Feel free to link CodeSandbox or another tool.

    <DragDrop onDrop={onDrop}>
      <Droppable hasNoWrapper>
        <DataList className="rca-notifications-list" aria-label="draggable data list example" isCompact>
          {notifications.map((notification) => (
            <NotificationItem key={notification.id} id={notification.id} notification={notification} />
          ))}
        </DataList>
      </Droppable>
    </DragDrop>

Is this a bug or enhancement? If this issue is a bug, is this issue blocking you or is there a work-around?

Bug 🐛

Workaround - pass classname to Droppable/Draggable instead of the child.

    <DragDrop onDrop={onDrop}>
-      <Droppable hasNoWrapper>
+      <Droppable className="rca-notifications-list" hasNoWrapper>
-        <DataList className="rca-notifications-list" aria-label="draggable data list example" isCompact>
+         <DataList aria-label="draggable data list example" isCompact>
          {notifications.map((notification) => (
            <NotificationItem key={notification.id} id={notification.id} notification={notification} />
          ))}
        </DataList>
      </Droppable>
    </DragDrop>

What is your product and what release version are you targeting?

WEB-RCA-UI (internal Red Hat tool)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions