Don't work in localhost with IOS twoaction button but work in codesandbox

[IamAhsanMani]

I am using react-swipeable-list with type IOS two action button where in example it show when we swipe from left side and release it, It hold and show two buttons but in my case when i swipe from left side and after releasing it, It just go back to it's original position without showing actions button.

I attach the behaviour in gif format

But the same code work fine in codesandbox as you can see in below attach gif

Don't know what is the actual issue. I try it on safari, chrome and firefox in any of these it is not working.

Link to the code in sandbox

[marekrozmus]

Unfortunately ;) that code works for me OK on all browsers I have here (brave, edge, firefox and chrome). I have also tested on different node versions 14 and 16. No idea what could be the problem :(

[IamAhsanMani]

@marekrozmus that’s said :(

[JNuno007]

It is happening to me too, I am using NextJS v12, MUI and NodeJS v18.

I have tried with node v16 and the same thing happens.

Have you figured it out?

[IamAhsanMani]

@JNuno007 not at all. and i force myselft to optout using it.

[JNuno007]

@IamAhsanMani same, unfortunately I've made a natively solution and also opted out.

[BenjaminBecic]

I am facing the same problem. Does anyone have a solution? This bug makes it unusable. Could the issue be related to the display style attribute? Does it require a specific arrangement of div elements with 'display: flex' or something similar?

[BenjaminBecic]

I found out why it didn't work. I used fullSwipe={false} and listType={Type.IOS} on the . After going through the source code of react-swipeable-list, I was wondering why it still had Symbol(Android) as a property and was still firing leadingFullSwipeAction.

I discovered that for my use case, the correct place for these properties is the component. There, I put type={Type.IOS} and fullSwipe={false}, and it works now.

Before:

<SwipeableList>
  ...
  <SwipeableListItem
    key={idx}
    trailingActions={trailingActions()}
    maxSwipe={0.7}
    threshold={0.2}
    listType={Type.IOS}
    fullSwipe={false}
  >
 ...
  </SwipeableListItem>
</SwipeableList>

After:

<SwipeableList type={Type.IOS} fullSwipe={false}  >
...
<SwipeableListItem
                        key={idx}
                        trailingActions={trailingActions()}
                        maxSwipe={0.7}
                        threshold={0.2}
                    >

 ...
  </SwipeableListItem>
</SwipeableList>

[marekrozmus]

@BenjaminBecic Thanks for the comment. BTW In the docs I wrote the type and fullSwipe should be in SwipeableList not in the SwipeableListItem :)

[tgoldenberg]

Also having this, despite correct application of the type={ListType.IOS} attribute on the SwipeableList

@jkrup