- {theme === 'step' ? (
-
- {labelList.map((labelItem, index) => (
-
setStepIndex(index)}>
-
-
- {parseTNode(labelItem.label)}
-
-
+ {/* 搜索框 */}
+ {filterable && (
+
+
+
+ )}
+
+ {!isSearching ? (
+ <>
+ {labelList.length > 0 && (
+
+ {theme === 'step' ? (
+
+ {labelList.map((labelItem, index) => (
+
setStepIndex(index)}>
+
+
+ {parseTNode(labelItem.label)}
+
+
+
+ ))}
- ))}
+ ) : null}
+ {theme === 'tab' && internalVisible ? (
+
({
+ label: item.label,
+ value: index,
+ }))}
+ spaceEvenly={false}
+ value={stepIndex}
+ onChange={(nextValue: number) => {
+ setStepIndex(nextValue);
+ }}
+ />
+ ) : null}
+ )}
+ {parseTNode(middleContent)}
+ {subTitles[stepIndex] ? (
+
{subTitles[stepIndex]}
) : null}
- {theme === 'tab' && internalVisible ? (
-
({
- label: item.label,
- value: index,
- }))}
- spaceEvenly={false}
- value={stepIndex}
- onChange={(nextValue: number) => {
- setStepIndex(nextValue);
- }}
- />
- ) : null}
-
- )}
- {parseTNode(middleContent)}
- {subTitles[stepIndex] ? (
-
{subTitles[stepIndex]}
- ) : null}
-
- {optionsList.map((currentOptions, index) => (
-
-
-
{
- const targetIndex = currentOptions.findIndex((item) => item.value === nextValue);
- const target = currentOptions[targetIndex];
- const selectedValues = [...internalSelectedValues.slice(0, index), nextValue];
-
- setInternalSelectedValues(selectedValues);
- onPick?.({
- value: nextValue,
- label: String(target?.label || ''),
- index: targetIndex,
- level: index,
- });
-
- if (target?.children === true && load) {
- load({ data: target.data, value: target.value, label: target.label })
- .then((loadedChildren) => {
- setOptionsList((prev) => [
- ...prev.slice(0, index + 1),
- normalizeOptionsByKeys(loadedChildren),
- ]);
- setStepIndex(index + 1);
- })
- .catch((error) => {
- console.error('Load children failed:', error);
+
+ {optionsList.map((currentOptions, index) => (
+
+
+ {
+ const targetIndex = currentOptions.findIndex((item) => item.value === nextValue);
+ const target = currentOptions[targetIndex];
+ const selectedValues = [...internalSelectedValues.slice(0, index), nextValue];
+
+ setInternalSelectedValues(selectedValues);
+ onPick?.({
+ value: nextValue,
+ label: String(target?.label || ''),
+ index: targetIndex,
+ level: index,
});
- return;
- }
-
- if (target && Array.isArray(target.children) && target.children.length > 0) {
- const children = target.children as TreeOptionData[];
- setOptionsList((prev) => [...prev.slice(0, index + 1), children]);
- setStepIndex(index + 1);
- return;
- }
-
- setOptionsList((prev) => prev.slice(0, index + 1));
- setStepIndex(index);
- onFinish(selectedValues);
- }}
- />
-
+
+ if (target?.children === true && load) {
+ load({ data: target.data, value: target.value, label: target.label })
+ .then((loadedChildren) => {
+ setOptionsList((prev) => [
+ ...prev.slice(0, index + 1),
+ normalizeOptionsByKeys(loadedChildren),
+ ]);
+ setStepIndex(index + 1);
+ })
+ .catch((error) => {
+ console.error('Load children failed:', error);
+ });
+ return;
+ }
+
+ if (target && Array.isArray(target.children) && target.children.length > 0) {
+ const children = target.children as TreeOptionData[];
+ setOptionsList((prev) => [...prev.slice(0, index + 1), children]);
+ setStepIndex(index + 1);
+ return;
+ }
+
+ setOptionsList((prev) => prev.slice(0, index + 1));
+ setStepIndex(index);
+ onFinish(selectedValues);
+ }}
+ />
+
+
- ))}
-
+
+ ) : (
+ <>
+ {filterResults.length > 0 ? (
+
+ {filterResults.map((result) => (
+
handleFilterResultTap(result)}
+ >
+ {result.fragments.map((frag) => (
+
+ {frag.text}
+
+ ))}
+
+ ))}
+
+ ) : (
+
{globalConfig?.cascader?.empty}
+ )}
+
+ )}
diff --git a/src/cascader/__tests__/cascader.test.tsx b/src/cascader/__tests__/cascader.test.tsx
index 5d6467d65..7057779d0 100644
--- a/src/cascader/__tests__/cascader.test.tsx
+++ b/src/cascader/__tests__/cascader.test.tsx
@@ -409,6 +409,231 @@ describe('Cascader', () => {
expect(onClose).toHaveBeenCalledWith('finish');
});
+
+ it(': filterable', async () => {
+ const filterableOptions = [
+ {
+ label: '北京市',
+ value: '110000',
+ children: [
+ {
+ label: '北京市',
+ value: '110100',
+ children: [
+ { label: '海淀区', value: '110108' },
+ { label: '朝阳区', value: '110105' },
+ ],
+ },
+ ],
+ },
+ {
+ label: '上海市',
+ value: '310000',
+ children: [{ label: '上海市', value: '310100', children: [{ label: '浦东新区', value: '310115' }] }],
+ },
+ {
+ label: '广东省',
+ value: '440000',
+ children: [{ label: '珠海市', value: '440400' }],
+ },
+ ];
+
+ const renderCascader = (overrides = {}) => {
+ const props: CascaderProps = {
+ visible: true,
+ filterable: true,
+ options: filterableOptions,
+ ...overrides,
+ };
+ return render(
);
+ };
+
+ const typeInSearch = (value: string) => {
+ const searchInput = document.querySelector('.t-search input') as HTMLInputElement;
+ fireEvent.input(searchInput, { target: { value } });
+ };
+
+ // renders search input
+ renderCascader();
+ expect(document.querySelector('.t-search')).toBeTruthy();
+
+ // default filter matches full-path label
+ typeInSearch('海');
+ await act(async () => {
+ vi.advanceTimersByTime(300);
+ });
+ const results = document.querySelectorAll(`${name}__filter-result-item`);
+ expect(results.length).toBeGreaterThan(0);
+
+ // shows empty state when no match
+ typeInSearch('xxxxx');
+ await act(async () => {
+ vi.advanceTimersByTime(300);
+ });
+ expect(document.querySelector(`${name}__filter-empty`)).toBeTruthy();
+ });
+
+ it(': filterable - custom filter function', async () => {
+ const filterableOptions = [
+ {
+ label: '北京市',
+ value: '110000',
+ children: [
+ {
+ label: '北京市',
+ value: '110100',
+ children: [{ label: '海淀区', value: '110108' }],
+ },
+ ],
+ },
+ {
+ label: '上海市',
+ value: '310000',
+ children: [{ label: '上海市', value: '310100', children: [{ label: '浦东新区', value: '310115' }] }],
+ },
+ ];
+
+ const customFilter = vi.fn((keyword: string, option: any) => option.label === keyword);
+ render(
);
+
+ const searchInput = document.querySelector('.t-search input') as HTMLInputElement;
+ fireEvent.input(searchInput, { target: { value: '浦东新区' } });
+ await act(async () => {
+ vi.advanceTimersByTime(300);
+ });
+
+ expect(customFilter).toHaveBeenCalled();
+ });
+
+ it(': filterable - selecting result closes cascader', async () => {
+ const filterableOptions = [
+ {
+ label: '北京市',
+ value: '110000',
+ children: [
+ {
+ label: '北京市',
+ value: '110100',
+ children: [{ label: '海淀区', value: '110108' }],
+ },
+ ],
+ },
+ ];
+
+ const onChange = vi.fn();
+ const onClose = vi.fn();
+ render(
);
+
+ const searchInput = document.querySelector('.t-search input') as HTMLInputElement;
+ fireEvent.input(searchInput, { target: { value: '海淀' } });
+ await act(async () => {
+ vi.advanceTimersByTime(300);
+ });
+
+ const resultItem = document.querySelector(`${name}__filter-result-item`);
+ expect(resultItem).toBeTruthy();
+
+ fireEvent.click(resultItem);
+ expect(onChange).toHaveBeenCalled();
+ expect(onClose).toHaveBeenCalledWith('finish');
+ });
+
+ it(': filterable - checkStrictly matches parent nodes', async () => {
+ const filterableOptions = [
+ {
+ label: '广东省',
+ value: '440000',
+ children: [
+ {
+ label: '深圳市',
+ value: '440300',
+ children: [{ label: '福田区', value: '440304' }],
+ },
+ ],
+ },
+ ];
+
+ const onChange = vi.fn();
+ const onClose = vi.fn();
+ const { rerender } = await render(
+
,
+ );
+
+ const typeInSearch = (value: string) => {
+ const searchInput = document.querySelector('.t-search input') as HTMLInputElement;
+ fireEvent.input(searchInput, { target: { value } });
+ };
+
+ // checkStrictly 下父节点“深圳市”与叶子“福田区”路径均含“深圳”，均可命中
+ typeInSearch('深圳');
+ await act(async () => {
+ vi.advanceTimersByTime(300);
+ });
+ const results = document.querySelectorAll(`${name}__filter-result-item`);
+ expect(results.length).toBe(2);
+
+ // 点击中间父节点结果，selectedOptions 返回从根到该节点的完整路径（与非搜索态一致）
+ fireEvent.click(results[0]);
+ expect(onChange).toHaveBeenCalledWith('440300', [
+ { label: '广东省', value: '440000' },
+ { label: '深圳市', value: '440300' },
+ ]);
+ expect(onClose).toHaveBeenCalledWith('finish');
+
+ // 非 checkStrictly 下仅叶子节点命中，父节点被排除
+ rerender(
);
+ typeInSearch('深圳');
+ await act(async () => {
+ vi.advanceTimersByTime(300);
+ });
+ const leafOnlyResults = document.querySelectorAll(`${name}__filter-result-item`);
+ expect(leafOnlyResults.length).toBe(1);
+ });
+
+ it(': filterable - selecting lazy node triggers load and exits search', async () => {
+ const option = { value: '440000', label: '广东省', children: true };
+ const children = [
+ { value: '440300', label: '深圳市', children: [] },
+ { value: '440400', label: '珠海市', children: [] },
+ ];
+ const load = vi.fn().mockResolvedValue(children);
+ const onPick = vi.fn();
+ const onChange = vi.fn();
+ const onClose = vi.fn();
+
+ render(
+
,
+ );
+
+ const searchInput = document.querySelector('.t-search input') as HTMLInputElement;
+ fireEvent.input(searchInput, { target: { value: '广东' } });
+ await act(async () => {
+ vi.advanceTimersByTime(300);
+ });
+
+ const resultItem = document.querySelector(`${name}__filter-result-item`);
+ expect(resultItem).toBeTruthy();
+
+ await act(async () => {
+ fireEvent.click(resultItem);
+ });
+
+ expect(onPick).toHaveBeenCalledWith({ value: '440000', label: '广东省', index: 0, level: 0 });
+ expect(load).toHaveBeenCalledWith({ data: option, value: option.value, label: option.label });
+ // 加载完成后退出搜索态，展示加载出的子级
+ expect(document.querySelector(`${name}__filter-result`)).toBeNull();
+ expect(document.querySelectorAll(`${name}__options`)).toHaveLength(2);
+ expect(onChange).not.toHaveBeenCalled();
+ expect(onClose).not.toHaveBeenCalled();
+ });
});
it(': lazy demo unlocks after loading and allows selection', async () => {
diff --git a/src/cascader/_example/filterable.tsx b/src/cascader/_example/filterable.tsx
new file mode 100644
index 000000000..235fbf187
--- /dev/null
+++ b/src/cascader/_example/filterable.tsx
@@ -0,0 +1,123 @@
+import React, { useState } from 'react';
+
+import { Cascader, Cell } from 'tdesign-mobile-react';
+
+const data = {
+ areaList: [
+ {
+ label: '北京市',
+ value: '110000',
+ children: [
+ {
+ value: '110100',
+ label: '北京市',
+ children: [
+ { value: '110101', label: '东城区' },
+ { value: '110102', label: '西城区' },
+ { value: '110105', label: '朝阳区' },
+ { value: '110106', label: '丰台区' },
+ { value: '110107', label: '石景山区' },
+ { value: '110108', label: '海淀区' },
+ { value: '110109', label: '门头沟区' },
+ { value: '110111', label: '房山区' },
+ { value: '110112', label: '通州区' },
+ { value: '110113', label: '顺义区' },
+ { value: '110114', label: '昌平区' },
+ { value: '110115', label: '大兴区' },
+ { value: '110116', label: '怀柔区' },
+ { value: '110117', label: '平谷区' },
+ { value: '110118', label: '密云区' },
+ { value: '110119', label: '延庆区' },
+ ],
+ },
+ ],
+ },
+ {
+ label: '上海市',
+ value: '310000',
+ children: [
+ {
+ value: '310100',
+ label: '上海市',
+ children: [
+ { value: '310101', label: '黄浦区' },
+ { value: '310104', label: '徐汇区' },
+ { value: '310105', label: '长宁区' },
+ { value: '310106', label: '静安区' },
+ { value: '310107', label: '普陀区' },
+ { value: '310109', label: '虹口区' },
+ { value: '310110', label: '杨浦区' },
+ { value: '310112', label: '闵行区' },
+ { value: '310113', label: '宝山区' },
+ { value: '310114', label: '嘉定区' },
+ { value: '310115', label: '浦东新区' },
+ ],
+ },
+ ],
+ },
+ {
+ label: '广东省',
+ value: '440000',
+ children: [
+ {
+ value: '440100',
+ label: '广州市',
+ children: [
+ { value: '440103', label: '荔湾区' },
+ { value: '440104', label: '越秀区' },
+ { value: '440105', label: '海珠区' },
+ { value: '440106', label: '天河区' },
+ { value: '440111', label: '白云区' },
+ ],
+ },
+ {
+ value: '440300',
+ label: '深圳市',
+ children: [
+ { value: '440303', label: '罗湖区' },
+ { value: '440304', label: '福田区' },
+ { value: '440305', label: '南山区' },
+ { value: '440306', label: '宝安区' },
+ { value: '440307', label: '龙岗区' },
+ ],
+ },
+ ],
+ },
+ ],
+};
+
+export default function FilterableDemo() {
+ const [visible, setVisible] = useState(false);
+
+ const [note, setNote] = useState('请选择地址');
+
+ const [value, setValue] = useState
();
+
+ return (
+ <>
+ {
+ setVisible(true);
+ }}
+ />
+ {
+ setNote((selectedOptions as any).map((item) => item.label).join('/') || '');
+ setValue(value);
+ }}
+ onClose={() => {
+ setVisible(false);
+ }}
+ />
+
+ );
+}
diff --git a/src/cascader/_example/index.tsx b/src/cascader/_example/index.tsx
index e0630c4eb..9f90d6214 100644
--- a/src/cascader/_example/index.tsx
+++ b/src/cascader/_example/index.tsx
@@ -3,6 +3,7 @@ import TDemoBlock from '../../../site/mobile/components/DemoBlock';
import TDemoHeader from '../../../site/mobile/components/DemoHeader';
import BaseDemo from './base';
import CheckStrictlyDemo from './check-strictly';
+import FilterableDemo from './filterable';
import KeysDemo from './keys';
import LazyDemo from './lazy';
import ThemeTabDemo from './theme-tab';
@@ -36,6 +37,9 @@ export default function CascaderDemo() {
+
+
+
|
);
}
diff --git a/src/cascader/cascader.md b/src/cascader/cascader.md
index ce6d2b44e..c3c609c30 100644
--- a/src/cascader/cascader.md
+++ b/src/cascader/cascader.md
@@ -10,9 +10,9 @@ className | String | - | 类名 | N
style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
checkStrictly | Boolean | false | 父子节点选中状态不再关联，可各自选中或取消 | N
closeBtn | TNode | true | 关闭按钮。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
-filter | Function | - | 【开发中】自定义过滤函数。返回 true 表示匹配，未设置时使用内置匹配规则：对路径中所有 label 拼接后做大小写不敏感的 includes 匹配。TS 类型：`CascaderFilterFunction ` `type CascaderFilterFunction
+ 
+ 
@@ -484,4 +491,4 @@ spline: explain