fix(default-value): should not show 'N/A' when a normal value is selected. (#2365)

* fix(default-value): fix N/A

* fix: fix invalid selection

packages/core/client/src/schema-component/antd/association-field/AssociationSelect.tsx

@@ -2,7 +2,7 @@ import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
 import { RecursionField, connect, mapProps, observer, useField, useFieldSchema, useForm } from '@formily/react';
 import { Space, message } from 'antd';
 import { isFunction } from 'mathjs';
-import React from 'react';
+import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { RecordProvider, useAPIClient } from '../../../';
 import { isVariable } from '../../common/utils/uitls';
@@ -22,6 +22,10 @@ const InternalAssociationSelect = observer((props: AssociationSelectProps) => {
   const { options: collectionField } = useAssociationFieldContext();
   const initValue = isVariable(props.value) ? undefined : props.value;
   const value = Array.isArray(initValue) ? initValue.filter(Boolean) : initValue;
+
+  // 因为通过 Schema 的形式书写的组件，在值变更的时候 `value` 的值没有改变，所以需要维护一个 `innerValue` 来变更值
+  const [innerValue, setInnerValue] = useState(value);
+
   const addMode = fieldSchema['x-component-props']?.addMode;
   const isAllowAddNew = fieldSchema['x-add-new'];
   const { t } = useTranslation();
@@ -29,6 +33,7 @@ const InternalAssociationSelect = observer((props: AssociationSelectProps) => {
   const form = useForm();
   const api = useAPIClient();
   const resource = api.resource(collectionField.target);
+
   const handleCreateAction = async (props) => {
     const { search: value, callBack } = props;
     const {
@@ -63,6 +68,7 @@ const InternalAssociationSelect = observer((props: AssociationSelectProps) => {
       </div>
     );
   };
+
   return (
     <div key={fieldSchema.name}>
       <Space.Compact style={{ display: 'flex', lineHeight: '32px' }}>
@@ -71,8 +77,12 @@ const InternalAssociationSelect = observer((props: AssociationSelectProps) => {
           {...props}
           size={'middle'}
           objectValue={objectValue}
-          value={value}
+          value={value || innerValue}
           service={service}
+          onChange={(value) => {
+            setInnerValue(value);
+            props.onChange?.(value);
+          }}
           CustomDropdownRender={addMode === 'quickAdd' && QuickAddContent}
         ></RemoteSelect>
 
@@ -99,7 +109,7 @@ interface AssociationSelectInterface {
   FilterDesigner: React.FC;
 }
 
-export const AssociationSelect = InternalAssociationSelect as unknown as AssociationSelectInterface;
+export const AssociationSelect = (InternalAssociationSelect as unknown) as AssociationSelectInterface;
 
 export const AssociationSelectReadPretty = connect(
   (props: any) => {

packages/core/client/src/schema-component/antd/form-item/FormItem.tsx

@@ -1,7 +1,7 @@
 import { css, cx } from '@emotion/css';
-import { ArrayCollapse, ArrayItems, FormItem as Item, FormLayout } from '@formily/antd-v5';
+import { ArrayCollapse, ArrayItems, FormLayout, FormItem as Item } from '@formily/antd-v5';
 import { Field } from '@formily/core';
-import { ISchema, observer, Schema, useField, useFieldSchema } from '@formily/react';
+import { ISchema, observer, useField, useFieldSchema } from '@formily/react';
 import { dayjs } from '@nocobase/utils/client';
 import { Select } from 'antd';
 import _ from 'lodash';
@@ -20,7 +20,7 @@ import {
 } from '../../../collection-manager';
 import { isTitleField } from '../../../collection-manager/Configuration/CollectionFields';
 import { GeneralSchemaItems } from '../../../schema-items/GeneralSchemaItems';
-import { GeneralSchemaDesigner, isPatternDisabled, isShowDefaultValue, SchemaSettings } from '../../../schema-settings';
+import { GeneralSchemaDesigner, SchemaSettings, isPatternDisabled, isShowDefaultValue } from '../../../schema-settings';
 import { useIsShowMultipleSwitch } from '../../../schema-settings/hooks/useIsShowMultipleSwitch';
 import { isVariable, parseVariables, useVariablesCtx } from '../../common/utils/uitls';
 import { useCompile, useDesignable, useFieldModeOptions } from '../../hooks';

packages/core/client/src/schema-settings/SchemaSettings.tsx

@@ -98,8 +98,6 @@ interface SchemaSettingsContextProps {
   collectionName?: any;
 }
 
-const mouseEnterDelay = 150;
-
 const SchemaSettingsContext = createContext<SchemaSettingsContextProps>(null);
 
 export const useSchemaSettings = () => {
@@ -1443,7 +1441,7 @@ export const findParentFieldSchema = (fieldSchema: Schema) => {
   }
 };
 
-SchemaSettings.DefaultValue = function DefaultvalueConfigure(props) {
+SchemaSettings.DefaultValue = function DefaultValueConfigure(props) {
   const variablesCtx = useVariablesCtx();
   const currentSchema = useFieldSchema();
   const fieldSchema = props?.fieldSchema ?? currentSchema;
@@ -1463,9 +1461,10 @@ SchemaSettings.DefaultValue = function DefaultvalueConfigure(props) {
   const parentFieldSchema = collectionField?.interface === 'm2o' && findParentFieldSchema(fieldSchema);
   const parentCollectionField = parentFieldSchema && getCollectionJoinField(parentFieldSchema?.['x-collection-field']);
   const tableCtx = useTableBlockContext();
-  const isAllowContexVariable =
+  const isAllowContextVariable =
     collectionField?.interface === 'm2m' ||
     (parentCollectionField?.type === 'hasMany' && collectionField?.interface === 'm2o');
+
   return (
     <SchemaSettings.ModalItem
       title={t('Set default value')}
@@ -1477,31 +1476,31 @@ SchemaSettings.DefaultValue = function DefaultvalueConfigure(props) {
           title: t('Set default value'),
           properties: {
             default: {
-              ...(fieldSchemaWithoutRequired || {}),
               'x-decorator': 'FormItem',
               'x-component': 'VariableInput',
               'x-component-props': {
                 ...(fieldSchema?.['x-component-props'] || {}),
                 collectionField,
-                targetField,
-                collectionName: collectionField?.collectionName,
-                contextCollectionName: isAllowContexVariable && tableCtx.collection,
+                contextCollectionName: isAllowContextVariable && tableCtx.collection,
                 schema: collectionField?.uiSchema,
                 className: defaultInputStyle,
                 renderSchemaComponent: function Com(props) {
                   const s = _.cloneDeep(fieldSchemaWithoutRequired) || ({} as Schema);
                   s.title = '';
+
+                  // 任何一个非空字符串都可以
+                  s.name = 'default';
+
                   s['x-read-pretty'] = false;
                   s['x-disabled'] = false;
 
-                  return (
-                    <SchemaComponent
-                      schema={{
+                  const schema = {
                     ...(s || {}),
                     'x-component-props': {
                       ...s['x-component-props'],
+                      collectionName: collectionField?.collectionName,
+                      targetField,
                       onChange: props.onChange,
-                          value: props.value,
                       defaultValue: getFieldDefaultValue(s, collectionField),
                       style: {
                         width: '100%',
@@ -1509,12 +1508,11 @@ SchemaSettings.DefaultValue = function DefaultvalueConfigure(props) {
                         minWidth: '200px',
                       },
                     },
-                      }}
-                    />
-                  );
+                  };
+
+                  return <SchemaComponent schema={schema} />;
                 },
               },
-              name: 'default',
               title: t('Default value'),
               default: getFieldDefaultValue(fieldSchema, collectionField),
             },