diff --git a/src/components/picker-view/tests/picker-view.test.tsx b/src/components/picker-view/tests/picker-view.test.tsx index adf876d466..1ce93ee171 100644 --- a/src/components/picker-view/tests/picker-view.test.tsx +++ b/src/components/picker-view/tests/picker-view.test.tsx @@ -89,6 +89,11 @@ describe('PickerView', () => { const wheelEl = document.body.querySelectorAll( `.${classPrefix}-column-wheel` )[0] + + const itemList = document.body.querySelectorAll( + `.${classPrefix}-column-item` + ) + fireEvent.mouseDown(wheelEl, { clientY: 0, buttons: 1, @@ -99,6 +104,8 @@ describe('PickerView', () => { }) fireEvent.mouseUp(wheelEl) expect(wheelEl).toHaveStyle('transform: translateY(-68px)') + // 滚到了第3个item + expect(itemList[2]).toHaveClass(`${classPrefix}-column-item-active`) fireEvent.click(screen.getByText('change')) await waitFor(() => expect(wheelEl).toHaveStyle('transform: none')) }) diff --git a/src/components/picker-view/wheel.tsx b/src/components/picker-view/wheel.tsx index 9283ec423d..fea1282937 100644 --- a/src/components/picker-view/wheel.tsx +++ b/src/components/picker-view/wheel.tsx @@ -14,6 +14,7 @@ import isEqual from 'lodash/isEqual' import { useIsomorphicLayoutEffect } from 'ahooks' import { measureCSSLength } from '../../utils/measure-css-length' import { supportsPassive } from '../../utils/supports-passive' +import classNames from 'classnames' const classPrefix = `adm-picker-view` @@ -271,15 +272,19 @@ export const Wheel = memo( {column.map((item, index) => { const selected = props.value === item.value if (selected) selectedIndex = index + function handleClick() { draggingRef.current = false scrollSelect(index) } + return (