Skip to content

Commit

Permalink
fix: Cascader expandTrigger="hover" behavior when search (#406)
Browse files Browse the repository at this point in the history
  • Loading branch information
afc163 authored Apr 20, 2023
1 parent 8127ada commit 798a4a0
Show file tree
Hide file tree
Showing 3 changed files with 61 additions and 52 deletions.
89 changes: 47 additions & 42 deletions examples/change-on-select.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,57 +3,63 @@ import React from 'react';
import '../assets/index.less';
import Cascader from '../src';

const addressOptions = [
const options = [
{
label: '福建',
value: 'fj',
label: "Women Clothing",
value: "Women Clothing",
children: [
{
label: '福州',
value: 'fuzhou',
label: "Women Tops, Blouses & Tee",
value: "Women Tops, Blouses & Tee",
children: [
{
label: '马尾',
value: 'mawei',
label: "Women T-Shirts",
value: "Women T-Shirts"
},
],
},
{
label: '泉州',
value: 'quanzhou',
{
label: "Women Tops",
value: "Women Tops"
},
{
label: "Women Tank Tops & Camis",
value: "Women Tank Tops & Camis"
},
{
label: "Women Blouses",
value: "Women Blouses"
}
]
},
],
},
{
label: '浙江',
value: 'zj',
children: [
{
label: '杭州',
value: 'hangzhou',
label: "Women Suits",
value: "Women Suits",
children: [
{
label: '余杭',
value: 'yuhang',
label: "Women Suit Pants",
value: "Women Suit Pants"
},
],
},
],
},
{
label: '北京',
value: 'bj',
children: [
{
label: '朝阳区',
value: 'chaoyang',
{
label: "Women Suit Sets",
value: "Women Suit Sets"
},
{
label: "Women Blazers",
value: "Women Blazers"
}
]
},
{
label: '海淀区',
value: 'haidian',
},
],
},
label: "Women Co-ords",
value: "Women Co-ords",
children: [
{
label: "Two-piece Outfits",
value: "Two-piece Outfits"
}
]
}
]
}
];

class Demo extends React.Component {
Expand All @@ -71,14 +77,13 @@ class Demo extends React.Component {
render() {
return (
<Cascader
options={addressOptions}
showSearch
options={options}
onChange={this.onChange}
changeOnSelect
expandTrigger="hover"
loadData={() => console.log('loadData')}
>
<input placeholder="please select address" value={this.state.inputValue} readOnly />
</Cascader>
/>
);
}
}
Expand Down
23 changes: 13 additions & 10 deletions src/OptionList/Column.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import * as React from 'react';
import classNames from 'classnames';
import { isLeaf, toPathKey } from '../utils/commonUtil';
import CascaderContext from '../context';
import Checkbox from './Checkbox';
import * as React from 'react';
import type { DefaultOptionType, SingleValueType } from '../Cascader';
import CascaderContext from '../context';
import { SEARCH_MARK } from '../hooks/useSearchOptions';
import { isLeaf, toPathKey } from '../utils/commonUtil';
import Checkbox from './Checkbox';

export const FIX_LABEL = '__cascader_fix_label__';

Expand All @@ -23,6 +23,7 @@ export interface ColumnProps {
halfCheckedSet: Set<React.Key>;
loadingKeys: React.Key[];
isSelectable: (option: DefaultOptionType) => boolean;
searchValue?: string;
}

export default function Column({
Expand All @@ -38,6 +39,7 @@ export default function Column({
halfCheckedSet,
loadingKeys,
isSelectable,
searchValue,
}: ColumnProps) {
const menuPrefixCls = `${prefixCls}-menu`;
const menuItemPrefixCls = `${prefixCls}-menu-item`;
Expand Down Expand Up @@ -112,13 +114,14 @@ export default function Column({
}) => {
// >>>>> Open
const triggerOpenPath = () => {
if (!disabled) {
const nextValueCells = [...fullPath];
if (hoverOpen && isMergedLeaf) {
nextValueCells.pop();
}
onActive(nextValueCells);
if (disabled || searchValue) {
return;
}
const nextValueCells = [...fullPath];
if (hoverOpen && isMergedLeaf) {
nextValueCells.pop();
}
onActive(nextValueCells);
};

// >>>>> Selection
Expand Down
1 change: 1 addition & 0 deletions src/OptionList/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -204,6 +204,7 @@ const RefOptionList = React.forwardRef<RefOptionListProps>((props, ref) => {
<Column
key={index}
{...columnProps}
searchValue={searchValue}
prefixCls={mergedPrefixCls}
options={col.options}
prevValuePath={prevValuePath}
Expand Down

1 comment on commit 798a4a0

@vercel
Copy link

@vercel vercel bot commented on 798a4a0 Apr 20, 2023

Choose a reason for hiding this comment

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

Successfully deployed to the following URLs:

cascader – ./

cascader-git-master-react-component.vercel.app
cascader-react-component.vercel.app

Please sign in to comment.