Skip to content

fix(swipe): resolve infinite re-render loop causing page freeze #3475

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
xiyehutao merged 2 commits into from
Jun 4, 2026
+217 −19
Merged

fix(swipe): resolve infinite re-render loop causing page freeze #3475

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c783bce
fix(swipe): resolve infinite re-render loop causing page freeze
xiaoyatong Jun 3, 2026
a938cf8
test(swipe): add touch interaction tests for coverage
xiaoyatong Jun 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
196 changes: 195 additions & 1 deletion src/packages/swipe/__tests__/swipe.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import * as React from 'react'
import { render } from '@testing-library/react'
import { render, fireEvent, act } from '@testing-library/react'
import '@testing-library/jest-dom'
import Swipe from '../index'
import Cell from '../../cell'
import Button from '../../button'
import InputNumber from '../../inputnumber'
import * as getRectModule from '@/utils/get-rect'

test('base swipe', () => {
const { container } = render(
Expand Down Expand Up @@ -96,3 +97,196 @@ test('base swipe content', async () => {
container.querySelector('.nut-swipe .nut-swipe-right .nut-button-wrap')
).toHaveTextContent('购物车')
})

test('swipe right to open via touch', () => {
const spy = jest.spyOn(getRectModule, 'getRect').mockReturnValue({
width: 80,
height: 40,
top: 0,
left: 0,
right: 80,
bottom: 40,
})

const onOpen = jest.fn()
const { container } = render(
<Swipe
rightAction={
<Button type="primary" shape="square">
删除
</Button>
}
onOpen={onOpen}
>
<Cell title="滑动" radius={0} />
</Swipe>
)

const wrapper = container.querySelector('.nut-swipe') as HTMLElement

act(() => {
fireEvent.touchStart(wrapper, {
touches: [{ clientX: 200, clientY: 0, pageX: 200, pageY: 0 }],
})
})
act(() => {
fireEvent.touchMove(wrapper, {
touches: [{ clientX: 100, clientY: 0, pageX: 100, pageY: 0 }],
})
})
act(() => {
fireEvent.touchEnd(wrapper, {
changedTouches: [{ clientX: 100, clientY: 0 }],
})
})

expect(onOpen).toHaveBeenCalled()
spy.mockRestore()
})

test('swipe left to open via touch', () => {
const spy = jest.spyOn(getRectModule, 'getRect').mockReturnValue({
width: 80,
height: 40,
top: 0,
left: 0,
right: 80,
bottom: 40,
})

const onOpen = jest.fn()
const { container } = render(
<Swipe
leftAction={
<Button type="success" shape="square">
选择
</Button>
}
onOpen={onOpen}
>
<Cell title="滑动" radius={0} />
</Swipe>
)

const wrapper = container.querySelector('.nut-swipe') as HTMLElement

act(() => {
fireEvent.touchStart(wrapper, {
touches: [{ clientX: 100, clientY: 0, pageX: 100, pageY: 0 }],
})
})
act(() => {
fireEvent.touchMove(wrapper, {
touches: [{ clientX: 200, clientY: 0, pageX: 200, pageY: 0 }],
})
})
act(() => {
fireEvent.touchEnd(wrapper, {
changedTouches: [{ clientX: 200, clientY: 0 }],
})
})

expect(onOpen).toHaveBeenCalled()
spy.mockRestore()
})

test('swipe close after opened', () => {
const spy = jest.spyOn(getRectModule, 'getRect').mockReturnValue({
width: 80,
height: 40,
top: 0,
left: 0,
right: 80,
bottom: 40,
})

const onClose = jest.fn()
const { container } = render(
<Swipe
rightAction={
<Button type="primary" shape="square">
删除
</Button>
}
onClose={onClose}
>
<Cell title="滑动" radius={0} />
</Swipe>
)

const wrapper = container.querySelector('.nut-swipe') as HTMLElement

// Open first
act(() => {
fireEvent.touchStart(wrapper, {
touches: [{ clientX: 200, clientY: 0, pageX: 200, pageY: 0 }],
})
})
act(() => {
fireEvent.touchMove(wrapper, {
touches: [{ clientX: 100, clientY: 0, pageX: 100, pageY: 0 }],
})
})
act(() => {
fireEvent.touchEnd(wrapper, {
changedTouches: [{ clientX: 100, clientY: 0 }],
})
})

// Close by swiping back
act(() => {
fireEvent.touchStart(wrapper, {
touches: [{ clientX: 100, clientY: 0, pageX: 100, pageY: 0 }],
})
})
act(() => {
fireEvent.touchMove(wrapper, {
touches: [{ clientX: 200, clientY: 0, pageX: 200, pageY: 0 }],
})
})
act(() => {
fireEvent.touchEnd(wrapper, {
changedTouches: [{ clientX: 200, clientY: 0 }],
})
})

expect(onClose).toHaveBeenCalled()
spy.mockRestore()
})
Comment on lines +101 to +255
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot Jun 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion | 🟠 Major | ⚡ Quick win

补上阈值临界区间的断言。

这里三组手势都在 width = 80 时使用了 100px 位移，已经同时超过了关闭态 30% 和打开态 70% 两个阈值。这样即使 opened 仍然被误用为 ref 对象，这些用例也会继续通过，锁不住这次 opened.current 修复的回归。建议至少补一组边界值断言：关闭态拖到约 40% 应该打开；已打开态回拖约 40% 不应关闭，超过约 70% 才关闭。

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/packages/swipe/__tests__/swipe.spec.tsx` around lines 101 - 255, Add
explicit boundary tests for the Swipe thresholds: when getRect (mocked via
getRectModule.getRect) returns width = 80, add one test that starts closed,
performs a touchStart at x=200 then touchMove to x=168 (≈40% drag / 32px) and
touchEnd and assert onOpen was called; add another test that starts opened
(simulate initial open by performing the >70% drag first as in existing "Open
first" steps) then touchStart at the opened position and touchMove back to x=168
(≈40%) and touchEnd and assert onClose was NOT called, then touchMove back
further to x=144 (≈70% / 56px) and touchEnd and assert onClose was called;
reference the existing tests' use of getRectModule.getRect, the Swipe component
and the wrapper queried via '.nut-swipe', and the onOpen/onClose mocks when
adding these boundary assertions.


test('disabled swipe should not respond to touch', () => {
const onOpen = jest.fn()
const { container } = render(
<Swipe
disabled
rightAction={
<Button type="primary" shape="square">
删除
</Button>
}
onOpen={onOpen}
>
<Cell title="禁用" radius={0} />
</Swipe>
)

const wrapper = container.querySelector('.nut-swipe') as HTMLElement

act(() => {
fireEvent.touchStart(wrapper, {
touches: [{ clientX: 200, clientY: 0, pageX: 200, pageY: 0 }],
})
})
act(() => {
fireEvent.touchMove(wrapper, {
touches: [{ clientX: 100, clientY: 0, pageX: 100, pageY: 0 }],
})
})
act(() => {
fireEvent.touchEnd(wrapper, {
changedTouches: [{ clientX: 100, clientY: 0 }],
})
})

expect(onOpen).not.toHaveBeenCalled()
})
5 changes: 3 additions & 2 deletions src/packages/swipe/swipe.taro.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,8 @@ export const Swipe = forwardRef<
if (touch.isHorizontal()) {
lockClick.current = true
const newState = { ...state, dragging: true }
const isEdge = !opened || touch.deltaX.current * startOffset.current < 0
const isEdge =
!opened.current || touch.deltaX.current * startOffset.current < 0
if (isEdge) {
preventDefault(event, true)
}
Expand Down Expand Up @@ -170,7 +171,7 @@ export const Swipe = forwardRef<
const toggle = (side: PositionX) => {
const offset = Math.abs(state.offset)
const base = 0.3
const baseNum = opened ? 1 - base : base
const baseNum = opened.current ? 1 - base : base
const width =
side === 'left' ? actionWidth.current.left : actionWidth.current.right
if (width && offset > Number(width) * baseNum) {
Expand Down
35 changes: 19 additions & 16 deletions src/packages/swipe/swipe.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,8 @@ export const Swipe = forwardRef<
left: 0,
right: 0,
})
const actionWidthRef = useRef(actionWidth)
actionWidthRef.current = actionWidth
const wrapperStyle = {
transform: `translate3d(${state.offset}px, 0, 0)`,
transitionDuration: state.dragging ? '0s' : '.6s',
Expand All @@ -78,7 +80,8 @@ export const Swipe = forwardRef<
if (touch.isHorizontal()) {
lockClick.current = true
const newState = { ...state, dragging: true }
const isEdge = !opened || touch.deltaX.current * startOffset.current < 0
const isEdge =
!opened.current || touch.deltaX.current * startOffset.current < 0
if (isEdge) {
preventDefault(event, true)
}
Expand Down Expand Up @@ -108,7 +111,7 @@ export const Swipe = forwardRef<
const toggle = (side: PositionX) => {
const offset = Math.abs(state.offset)
const base = 0.3
const baseNum = opened ? 1 - base : base
const baseNum = opened.current ? 1 - base : base
const width = side === 'left' ? leftWidth : rightWidth

if (width && offset > Number(width) * baseNum) {
Expand Down Expand Up @@ -151,22 +154,22 @@ export const Swipe = forwardRef<
}
return 0
}
const leftRef = useCallback(
(node: Element | null) => {
if (node !== null) {
setActionWidth((v) => ({ ...v, left: getNodeWidth(node) }))
const leftRef = useCallback((node: Element | null) => {
if (node !== null) {
const width = getNodeWidth(node)
if (width !== actionWidthRef.current.left) {
setActionWidth((v) => ({ ...v, left: width }))
}
},
[props.leftAction]
)
const rightRef = useCallback(
(node: Element | null) => {
if (node !== null) {
setActionWidth((v) => ({ ...v, right: getNodeWidth(node) }))
}
}, [])
const rightRef = useCallback((node: Element | null) => {
if (node !== null) {
const width = getNodeWidth(node)
if (width !== actionWidthRef.current.right) {
setActionWidth((v) => ({ ...v, right: width }))
}
},
[props.rightAction]
)
}
}, [])
const renderActionContent = (side: PositionX, measuredRef: any) => {
if (props[`${side}Action`]) {
return (
Expand Down
Loading