diff --git a/packages/core/client/src/schema-component/antd/association-field/InternalCascadeSelect.tsx b/packages/core/client/src/schema-component/antd/association-field/InternalCascadeSelect.tsx index e5a2e2c80..8d16538f7 100644 --- a/packages/core/client/src/schema-component/antd/association-field/InternalCascadeSelect.tsx +++ b/packages/core/client/src/schema-component/antd/association-field/InternalCascadeSelect.tsx @@ -45,6 +45,7 @@ const CascadeSelect = connect((props) => { const resource = api.resource(collectionField.target); const { getCollectionJoinField, getInterface } = useCollectionManager_deprecated(); const fieldNames = associationField?.componentProps?.fieldNames; + const [change, setChange] = useState(false); const targetField = collectionField?.target && fieldNames?.label && @@ -57,7 +58,7 @@ const CascadeSelect = connect((props) => { }, [targetField]); const field: any = useField(); useEffect(() => { - if (value) { + if (value && !change) { const values = Array.isArray(value) ? extractLastNonNullValueObjects( value?.filter((v) => v.value), @@ -73,7 +74,7 @@ const CascadeSelect = connect((props) => { }); setSelectedOptions(options); } - }, []); + }, [value]); const mapOptionsToTags = useCallback( (options) => { try { @@ -140,6 +141,7 @@ const CascadeSelect = connect((props) => { }; const handleSelect = async (value, option, index) => { + setChange(true); const data = await handleGetOptions({ parentId: option?.id }); const options = [...selectedOptions]; options.splice(index + 1); @@ -272,6 +274,13 @@ export const InternalCascadeSelect = observer( return [{}]; }; const defaultValue = toValue(); + useEffect(() => { + const isChange = selectForm.values?.select_array?.filter((value) => value && Object.keys(value).length); + if (collectionField.interface !== 'm2o' && props.value && !isChange.length) { + const value = extractLastNonNullValueObjects(defaultValue).filter((v) => v && Object.keys(v).length > 0); + selectForm.setValues({ select_array: value }); + } + }, [props.value]); const schema = { type: 'object', properties: { @@ -315,26 +324,24 @@ export const InternalCascadeSelect = observer( }, }; return ( - props.value !== null && ( - - {collectionField.interface === 'm2o' ? ( - - ) : ( - - )} - - ) + + {collectionField.interface === 'm2o' ? ( + + ) : ( + + )} + ); }, { displayName: 'InternalCascadeSelect' }, diff --git a/packages/core/client/src/schema-component/antd/association-field/InternalCascader.tsx b/packages/core/client/src/schema-component/antd/association-field/InternalCascader.tsx index 7a81e202c..f6922859a 100644 --- a/packages/core/client/src/schema-component/antd/association-field/InternalCascader.tsx +++ b/packages/core/client/src/schema-component/antd/association-field/InternalCascader.tsx @@ -56,12 +56,12 @@ const Cascade = connect((props) => { const changOnSelect = fieldSchema['x-component-props']?.changOnSelect || false; const field: any = useField(); const [selectedOptions, setSelectedOptions] = useState([]); - const [chang, setChang] = useState(false); + const [change, setChange] = useState(false); const [dataList, setDataList] = useState({}); const { styles } = useStyles(); useEffect(() => { const propsValue = props.value || fieldSchema['x-component-props'].value; - if (!chang && propsValue) { + if (!change && propsValue) { if (!propsValue.parent && !Object.keys(dataList).length) { resource .list({ @@ -116,7 +116,7 @@ const Cascade = connect((props) => { }; const handleSelect = async (option) => { - setChang(true); + setChange(true); if (option) { if (['o2m', 'm2m'].includes(collectionField.interface)) { const fieldValue = Array.isArray(associationField.fieldValue) ? associationField.fieldValue : []; @@ -243,6 +243,13 @@ export const InternalCascader = observer( return [{}]; }; const defaultValue = toValue(); + useEffect(() => { + const isChange = selectForm.values?.select_array?.filter((value) => value && Object.keys(value).length); + if (collectionField.interface !== 'm2o' && props.value && !isChange.length) { + selectForm.setInitialValues({ select_array: defaultValue }); + } + }, [props.value]); + const schema = { type: 'object', properties: {