Skip to content

Commit f5669c6

Browse files
crazyairafc163
andauthored
fix: search no scroll (#532)
Co-authored-by: afc163 <afc163@gmail.com>
1 parent c75437d commit f5669c6

File tree

3 files changed

+85
-6
lines changed

3 files changed

+85
-6
lines changed

src/OptionList/Column.tsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,6 @@ export interface ColumnProps<OptionType extends DefaultOptionType = DefaultOptio
2323
halfCheckedSet: Set<React.Key>;
2424
loadingKeys: React.Key[];
2525
isSelectable: (option: DefaultOptionType) => boolean;
26-
searchValue?: string;
2726
}
2827

2928
export default function Column<OptionType extends DefaultOptionType = DefaultOptionType>({
@@ -39,7 +38,6 @@ export default function Column<OptionType extends DefaultOptionType = DefaultOpt
3938
halfCheckedSet,
4039
loadingKeys,
4140
isSelectable,
42-
searchValue,
4341
}: ColumnProps<OptionType>) {
4442
const menuPrefixCls = `${prefixCls}-menu`;
4543
const menuItemPrefixCls = `${prefixCls}-menu-item`;
@@ -117,7 +115,7 @@ export default function Column<OptionType extends DefaultOptionType = DefaultOpt
117115
}) => {
118116
// >>>>> Open
119117
const triggerOpenPath = () => {
120-
if (disabled || searchValue) {
118+
if (disabled) {
121119
return;
122120
}
123121
const nextValueCells = [...fullPath];

src/OptionList/List.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -166,6 +166,9 @@ const RawOptionList = React.forwardRef<RefOptionListProps, RawOptionListProps>((
166166

167167
// >>>>> Active Scroll
168168
React.useEffect(() => {
169+
if (searchValue) {
170+
return;
171+
}
169172
for (let i = 0; i < activeValueCells.length; i += 1) {
170173
const cellPath = activeValueCells.slice(0, i + 1);
171174
const cellKeyPath = toPathKey(cellPath);
@@ -176,7 +179,7 @@ const RawOptionList = React.forwardRef<RefOptionListProps, RawOptionListProps>((
176179
scrollIntoParentView(ele);
177180
}
178181
}
179-
}, [activeValueCells]);
182+
}, [activeValueCells, searchValue]);
180183

181184
// ========================== Render ==========================
182185
// >>>>> Empty
@@ -213,7 +216,6 @@ const RawOptionList = React.forwardRef<RefOptionListProps, RawOptionListProps>((
213216
<Column
214217
key={index}
215218
{...columnProps}
216-
searchValue={searchValue}
217219
prefixCls={mergedPrefixCls}
218220
options={col.options}
219221
prevValuePath={prevValuePath}

tests/index.spec.tsx

Lines changed: 80 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import Cascader from '../src';
66
import { addressOptions, addressOptionsForUneven, optionsForActiveMenuItems } from './demoOptions';
77
import { mount } from './enzyme';
88
import { toRawValues } from '../src/utils/commonUtil';
9-
import { render } from '@testing-library/react';
9+
import { fireEvent, render } from '@testing-library/react';
1010

1111
describe('Cascader.Basic', () => {
1212
let selectedValue: any;
@@ -1022,6 +1022,85 @@ describe('Cascader.Basic', () => {
10221022
wrapper.find(`li[data-path-key]`).at(0).simulate('click');
10231023
wrapper.find(`li[data-path-key]`).at(1).simulate('click');
10241024
});
1025+
it('hover + search', () => {
1026+
let getOffesetTopTimes = 0;
1027+
const spyElement = spyElementPrototypes(HTMLElement, {
1028+
offsetTop: {
1029+
get: () => (getOffesetTopTimes++ % 2 === 0 ? 100 : 0),
1030+
},
1031+
scrollTop: {
1032+
get: () => 0,
1033+
},
1034+
offsetHeight: {
1035+
get: () => 10,
1036+
},
1037+
});
1038+
1039+
const wrapper = render(
1040+
<Cascader
1041+
expandTrigger="hover"
1042+
options={[
1043+
{
1044+
label: 'Women Clothing',
1045+
value: '1',
1046+
children: [
1047+
{
1048+
label: 'Women Tops, Blouses & Tee',
1049+
value: '11',
1050+
children: [
1051+
{
1052+
label: 'Women T-Shirts',
1053+
value: '111',
1054+
},
1055+
{
1056+
label: 'Women Tops',
1057+
value: '112',
1058+
},
1059+
{
1060+
label: 'Women Tank Tops & Camis',
1061+
value: '113',
1062+
},
1063+
{
1064+
label: 'Women Blouses',
1065+
value: '114',
1066+
},
1067+
],
1068+
},
1069+
{
1070+
label: 'Women Suits',
1071+
value: '2',
1072+
children: [
1073+
{
1074+
label: 'Women Suit Pants',
1075+
value: '21',
1076+
},
1077+
{
1078+
label: 'Women Suit Sets',
1079+
value: '22',
1080+
},
1081+
{
1082+
label: 'Women Blazers',
1083+
value: '23',
1084+
},
1085+
],
1086+
},
1087+
],
1088+
},
1089+
]}
1090+
showSearch
1091+
checkable
1092+
open
1093+
/>,
1094+
);
1095+
fireEvent.change(wrapper.container.querySelector('input') as HTMLElement, {
1096+
target: { value: 'w' },
1097+
});
1098+
const items = wrapper.container.querySelectorAll('.rc-cascader-menu-item');
1099+
fireEvent.mouseEnter(items[9]);
1100+
expect(mockScrollTo).toHaveBeenCalledTimes(0);
1101+
1102+
spyElement.mockRestore();
1103+
});
10251104
});
10261105

10271106
it('not crash when value type is not array', () => {

0 commit comments

Comments
 (0)