From 68976e0ebe164cadf3dc9afa35b1c6561d5f822c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=A2=AB=E9=9B=A8=E6=B0=B4=E8=BF=87=E6=BB=A4=E7=9A=84?=
 =?UTF-8?q?=E7=A9=BA=E6=B0=94-Rain?= <958414905@qq.com>
Date: Mon, 24 Jul 2023 16:24:15 +0800
Subject: [PATCH] fix(default-value): fix tag in RemoteSelect (#2306)

---
 .../antd/form-item/FormItem.tsx               | 100 +++++++-----------
 .../antd/remote-select/RemoteSelect.tsx       |  10 +-
 .../schema-component/antd/select/Select.tsx   |  22 +++-
 3 files changed, 61 insertions(+), 71 deletions(-)

diff --git a/packages/core/client/src/schema-component/antd/form-item/FormItem.tsx b/packages/core/client/src/schema-component/antd/form-item/FormItem.tsx
index 2aad77835..3e781f987 100644
--- a/packages/core/client/src/schema-component/antd/form-item/FormItem.tsx
+++ b/packages/core/client/src/schema-component/antd/form-item/FormItem.tsx
@@ -353,73 +353,47 @@ FormItem.Designer = function Designer() {
                 type: 'object',
                 title: t('Set default value'),
                 properties: {
-                  default:
-                    //  isInvariable(interfaceConfig)
-                    // ? {
-                    //     ...(fieldSchemaWithoutRequired || {}),
-                    //     'x-decorator': 'FormItem',
-                    //     'x-component-props': {
-                    //       ...fieldSchema['x-component-props'],
-                    //       targetField,
-                    //       component:
-                    //         collectionField?.target && collectionField?.interface !== 'chinaRegion'
-                    //           ? 'AssociationSelect'
-                    //           : undefined,
-                    //       service: {
-                    //         resource: collectionField?.target,
-                    //       },
-                    //       style: {
-                    //         width: '100%',
-                    //         verticalAlign: 'top',
-                    //       },
-                    //     },
-                    //     name: 'default',
-                    //     title: t('Default value'),
-                    //     default: getFieldDefaultValue(fieldSchema, collectionField),
-                    //     'x-read-pretty': false,
-                    //     'x-disabled': false,
-                    //   }
-                    // :
-                    {
-                      ...(fieldSchemaWithoutRequired || {}),
-                      'x-decorator': 'FormItem',
-                      'x-component': 'VariableInput',
-                      'x-component-props': {
-                        ...(fieldSchema?.['x-component-props'] || {}),
-                        collectionField,
-                        targetField,
-                        collectionName: collectionField?.collectionName,
-                        schema: collectionField?.uiSchema,
-                        className: defaultInputStyle,
-                        renderSchemaComponent: function Com(props) {
-                          const s = _.cloneDeep(fieldSchemaWithoutRequired) || ({} as Schema);
-                          s.title = '';
-                          s['x-read-pretty'] = false;
-                          s['x-disabled'] = false;
+                  default: {
+                    ...(fieldSchemaWithoutRequired || {}),
+                    'x-decorator': 'FormItem',
+                    'x-component': 'VariableInput',
+                    'x-component-props': {
+                      ...(fieldSchema?.['x-component-props'] || {}),
+                      collectionField,
+                      targetField,
+                      collectionName: collectionField?.collectionName,
+                      schema: collectionField?.uiSchema,
+                      className: defaultInputStyle,
+                      renderSchemaComponent: function Com(props) {
+                        const s = _.cloneDeep(fieldSchemaWithoutRequired) || ({} as Schema);
 
-                          return (
-                            <SchemaComponent
-                              schema={{
-                                ...(s || {}),
-                                'x-component-props': {
-                                  ...s['x-component-props'],
-                                  onChange: props.onChange,
-                                  value: props.value,
-                                  defaultValue: getFieldDefaultValue(s, collectionField),
-                                  style: {
-                                    width: '100%',
-                                    verticalAlign: 'top',
-                                  },
+                        s.title = '';
+                        s['x-read-pretty'] = false;
+                        s['x-disabled'] = false;
+
+                        return (
+                          <SchemaComponent
+                            schema={{
+                              ...(s || {}),
+                              'x-component-props': {
+                                ...s['x-component-props'],
+                                onChange: props.onChange,
+                                value: props.value,
+                                defaultValue: getFieldDefaultValue(s, collectionField),
+                                style: {
+                                  width: '100%',
+                                  verticalAlign: 'top',
                                 },
-                              }}
-                            />
-                          );
-                        },
+                              },
+                            }}
+                          />
+                        );
                       },
-                      name: 'default',
-                      title: t('Default value'),
-                      default: getFieldDefaultValue(fieldSchema, collectionField),
                     },
+                    name: 'default',
+                    title: t('Default value'),
+                    default: getFieldDefaultValue(fieldSchema, collectionField),
+                  },
                 },
               } as ISchema
             }
diff --git a/packages/core/client/src/schema-component/antd/remote-select/RemoteSelect.tsx b/packages/core/client/src/schema-component/antd/remote-select/RemoteSelect.tsx
index b32e96506..84257c122 100644
--- a/packages/core/client/src/schema-component/antd/remote-select/RemoteSelect.tsx
+++ b/packages/core/client/src/schema-component/antd/remote-select/RemoteSelect.tsx
@@ -35,6 +35,7 @@ const InternalRemoteSelect = connect(
       service = {},
       wait = 300,
       value,
+      defaultValue,
       objectValue,
       manual = true,
       mapOptions,
@@ -249,12 +250,13 @@ const InternalRemoteSelect = connect(
     };
 
     const options = useMemo(() => {
+      const v = value || defaultValue;
       if (!data?.data?.length) {
-        return value != null ? (Array.isArray(value) ? value : [value]) : [];
+        return v != null ? (Array.isArray(v) ? v : [v]) : [];
       }
-      const valueOptions = (value != null && (Array.isArray(value) ? value : [value])) || [];
+      const valueOptions = (v != null && (Array.isArray(v) ? v : [v])) || [];
       return uniqBy(data?.data?.concat(valueOptions) || [], fieldNames.value);
-    }, [data?.data, value]);
+    }, [value, defaultValue, data?.data, fieldNames.value]);
 
     const onDropdownVisibleChange = (visible) => {
       setOpen(visible);
@@ -264,6 +266,7 @@ const InternalRemoteSelect = connect(
       }
       firstRun.current = true;
     };
+
     return (
       <Select
         open={open}
@@ -276,6 +279,7 @@ const InternalRemoteSelect = connect(
         onDropdownVisibleChange={onDropdownVisibleChange}
         objectValue={objectValue}
         value={value}
+        defaultValue={defaultValue}
         {...others}
         loading={data! ? loading : true}
         options={mapOptionsToTags(options)}
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 ac068c2ac..64dfa0c62 100644
--- a/packages/core/client/src/schema-component/antd/select/Select.tsx
+++ b/packages/core/client/src/schema-component/antd/select/Select.tsx
@@ -3,10 +3,10 @@ import { connect, mapProps, mapReadPretty } from '@formily/react';
 import { isValid, toArr } from '@formily/shared';
 import { isPlainObject } from '@nocobase/utils/client';
 import type { SelectProps } from 'antd';
-import { Empty, Select as AntdSelect, Spin } from 'antd';
+import { Select as AntdSelect, Empty, Spin } from 'antd';
 import React from 'react';
 import { ReadPretty } from './ReadPretty';
-import { defaultFieldNames, FieldNames, getCurrentOptions } from './utils';
+import { FieldNames, defaultFieldNames, getCurrentOptions } from './utils';
 
 type Props = SelectProps<any, any> & {
   objectValue?: boolean;
@@ -19,7 +19,7 @@ type Props = SelectProps<any, any> & {
 const isEmptyObject = (val: any) => !isValid(val) || (typeof val === 'object' && Object.keys(val).length === 0);
 
 const ObjectSelect = (props: Props) => {
-  const { value, options, onChange, fieldNames, mode, loading, rawOptions, ...others } = props;
+  const { value, options, onChange, fieldNames, mode, loading, rawOptions, defaultValue, ...others } = props;
   const toValue = (v: any) => {
     if (isEmptyObject(v)) {
       return;
@@ -40,9 +40,11 @@ const ObjectSelect = (props: Props) => {
     }
     return currentOptions.shift();
   };
+
   return (
     <AntdSelect
       value={toValue(value)}
+      defaultValue={toValue(defaultValue)}
       allowClear
       labelInValue
       notFoundContent={loading ? <Spin /> : <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />}
@@ -78,13 +80,22 @@ const filterOption = (input, option) => (option?.label ?? '').toLowerCase().incl
 
 const InternalSelect = connect(
   (props: Props) => {
-    const { objectValue, loading, value, rawOptions, ...others } = props;
+    const { objectValue, loading, value, rawOptions, defaultValue, ...others } = props;
     let mode: any = props.multiple ? 'multiple' : props.mode;
     if (mode && !['multiple', 'tags'].includes(mode)) {
       mode = undefined;
     }
     if (objectValue) {
-      return <ObjectSelect rawOptions={rawOptions} {...others} value={value} mode={mode} loading={loading} />;
+      return (
+        <ObjectSelect
+          rawOptions={rawOptions}
+          {...others}
+          defaultValue={defaultValue}
+          value={value}
+          mode={mode}
+          loading={loading}
+        />
+      );
     }
     const toValue = (v) => {
       if (['tags', 'multiple'].includes(props.mode) || props.multiple) {
@@ -103,6 +114,7 @@ const InternalSelect = connect(
         popupMatchSelectWidth={false}
         notFoundContent={loading ? <Spin /> : <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />}
         value={toValue(value)}
+        defaultValue={toValue(defaultValue)}
         {...others}
         onChange={(changed) => {
           props.onChange?.(changed === undefined ? null : changed);