diff --git a/packages/core/client/src/schema-component/antd/select/Select.tsx b/packages/core/client/src/schema-component/antd/select/Select.tsx index 5932089d8..75aa2fa94 100644 --- a/packages/core/client/src/schema-component/antd/select/Select.tsx +++ b/packages/core/client/src/schema-component/antd/select/Select.tsx @@ -17,9 +17,11 @@ const ObjectSelect = (props: Props) => { if (isEmptyObject(v)) { return; } - const values = toArr(v).filter(item => item).map((val) => { - return typeof val === 'object' ? val[fieldNames.value] : val; - }); + const values = toArr(v) + .filter((item) => item) + .map((val) => { + return typeof val === 'object' ? val[fieldNames.value] : val; + }); const current = getCurrentOptions(values, options, fieldNames)?.map((val) => { return { label: val[fieldNames.label], @@ -38,6 +40,13 @@ const ObjectSelect = (props: Props) => { labelInValue options={options} fieldNames={fieldNames} + showSearch + filterOption={(input, option) => (option?.[fieldNames.label || 'label'] ?? '').includes(input)} + filterSort={(optionA, optionB) => + (optionA?.[fieldNames.label || 'label'] ?? '') + .toLowerCase() + .localeCompare((optionB?.[fieldNames.label || 'label'] ?? '').toLowerCase()) + } onChange={(changed) => { const current = getCurrentOptions( toArr(changed).map((v) => v.value), @@ -62,7 +71,18 @@ export const Select = connect( if (objectValue) { return ; } - return ; + return ( + (option?.label ?? '').includes(input)} + filterSort={(optionA, optionB) => + (optionA?.label ?? '').toLowerCase().localeCompare((optionB?.label ?? '').toLowerCase()) + } + allowClear + {...others} + value={others.value || undefined} + /> + ); }, mapProps( { diff --git a/packages/core/client/src/schema-component/antd/select/demos/demo2.tsx b/packages/core/client/src/schema-component/antd/select/demos/demo2.tsx index 127a245f4..60406adf1 100644 --- a/packages/core/client/src/schema-component/antd/select/demos/demo2.tsx +++ b/packages/core/client/src/schema-component/antd/select/demos/demo2.tsx @@ -27,7 +27,7 @@ const schema = { 'x-decorator': 'FormItem', 'x-component': 'Select', 'x-component-props': { - mode: 'tags', + mode: 'multiple', }, enum: dataSource, 'x-reactions': {