Does not work with react-awesome-dnd

[fddayan]

Describe the bug I'm trying to create a lit with react-swipeable-list and react-awesome-dnd I'm under the impression both should play nice together, but when I swipe to see the action, the action do not remain, the actions colpast again. If I remove react-awesome-dnd it works.

 <DragDropContext onDragEnd={onDragEnd(items, uid)}>
      <Droppable droppableId="droppable">
        {(provided1, snapshot) => (
          <div ref={provided1.innerRef} {...provided1.droppableProps} style={getListStyle(snapshot.isDraggingOver)}>
            <SwipeableList
              fullSwipe={false} type={Type.IOS}
            >
              {items.map((timer, index) => (
                <Draggable key={timer.id} draggableId={timer.id} index={index}>
                  {(provided2, snapshot) => (
                    <div
                      ref={provided2.innerRef}
                      {...provided2.draggableProps}
                      style={getItemStyle(snapshot.isDragging, provided2.draggableProps.style)}
                    >
                      <SwipeableListItem trailingActions={trailingActions(theme, timer, handleEditItem)}>
                        <Stack direction='row'>
                          <div {...provided2.dragHandleProps} style={{ alignSelf: 'center' }}>
                            <DragIndicatorIcon sx={{ mr: 1 }} htmlColor='gray' />
                          </div>
                          <Box sx={{ mt: 1, ml: 0, mr: 0 }}>
                            <Typography
                              variant='subtitle1'
                              fontWeight='bold'
                              alignSelf='start'
                              textTransform='capitalize'
                              textAlign='left'
                            >
                              {timer.title}
                            </Typography>
                            <TimerItemContent timer={timer} />
                          </Box>
                        </Stack>
                      </SwipeableListItem>
                    </div>
                  )}
                </Draggable>
              ))}
            </SwipeableList>
          </div>
        )}
      </Droppable>
    </DragDropContext>

Expected behavior When I swipe I would expect the actions to remain so I can touch any of them

Desktop (please complete the following information):

• chrome

[marekrozmus]

@fddayan Could you please add some GIF or animation what you actually want to achieve?

[IamAhsanMani]

@marekrozmus this the behaviour i am facing too.

See below attached gif where i cannot see two action buttons. When I swipe to see the action, the action do not remain, the actions colpast again.

But strange the same code work fine in codesandbox https://codesandbox.io/s/keen-voice-rohu02

[marekrozmus]

I am not sure what do you want to achieve with placing Draggable as the child of the SwipeableList. The SwipeableList expects to have SwipeableListItem as a child. It won't work if it will be something else. So the question is why having Draggable as a parent for SwipeableListItem?

[IamAhsanMani]

@marekrozmus in this comment https://github.com/marekrozmus/react-swipeable-list/issues/29#issuecomment-1442872427 you can see the code sandbox where i provided SwipeableListItem as child to SwipeableList. But it still didn’t work.

you can see attached gif in above comment.

[marekrozmus]

@IamAhsanMani I saw that :) but just wondering what is the reason for using the Draggable inside the list?

[IamAhsanMani]

@marekrozmus don’t what could be the reason of using Draggable inside the list. But in my case it is not work as i didn’t use anything else except SwipeableListItem. could you help me to finger out what is the issue with code

[marekrozmus]

Closing as the usage is incorrect - it should be:

<SwipeableList>
  <SwipeableListItem>
    Item content
  </SwipeableListItem>
</SwipeableList>;

and not:

<SwipeableList>
  <Draggable>
     <div>
        <SwipeableListItem 

please check the readme file.