SwipeAction where an action opens a popup disallows clicking its child

[yergom]

Version of antd-mobile

5.22.0

Operating system and its version

iOS, Android, Others

Browser and its version

No response

Sandbox to reproduce

https://codesandbox.io/s/mobile-antd-swipearea-popup-v6b5zu?file=/src/App.tsx

What happened?

The example is a simple modification from the SwipeAction demo in the official documentation. Instead of opening a Modal, I open a Popup. After the popup is closed, I would have expected that the List.Item is clickable. However, it is not! the user has to click somewhere outside the List.Item (or slide it again) to be able to click on it.

I've researched a bit what's going on. The problematic part is somewhere around here. This line calculates the pointer-events css property. Somehow, in the presence of a popup, react-spring in not updating the dom element of that animated.div.

Relevant log output

No response

[miracles1919]

I tried it out and found the problematic part is

<SwipeAction
  ref={ref}
  rightActions={[
  {
    onClick: () => {
     ref.current?.close();
+    setVisible(true);
    }
  }
  ]}
 >

animated.div is not update when use setState

[awmleer]

This is probably a bug of react-spring. We'll forward an issue to them.

[iamppz]

The problem still exists, here is my workaround:

setVisible(false);
const contents = document.querySelectorAll(
  ".adm-swipe-action-content"
) as any[];
contents.forEach((content) => {
  content.firstChild.style.pointerEvents = null;
});

[WE5T3]

The problem still exists, here is my workaround:

setVisible(false);
const contents = document.querySelectorAll(
  ".adm-swipe-action-content"
) as any[];
contents.forEach((content) => {
  content.firstChild.style.pointerEvents = null;
});

This solution works, thanks so much