feat: Select组件reload期间禁用 Close: #8818

docs/zh-CN/components/form/select.md

@@ -1261,3 +1261,70 @@ leftOptions 动态加载，默认 source 接口是返回 options 部分，而 le
 | reset    | -                                      | 将值重置为`resetValue`，若没有配置`resetValue`，则清空                                  |
 | reload   | -                                      | 重新加载，调用 `source`，刷新数据域数据刷新（重新加载）                                 |
 | setValue | `value: string` \| `string[]` 更新的值 | 更新数据，开启`multiple`支持设置多项，开启`joinValues`时，多值用`,`分隔，否则多值用数组 |
+
+
+### 刷新数据源 reload
+
+```schema: scope="body"
+{
+    "type": "form",
+    "body": [
+        {
+          "type": "control",
+          "label": "点击刷新",
+          "mode": "horizontal",
+          "body": [
+            {
+              "type": "action",
+              "label": "点击刷新Select数据源",
+              "level": "primary",
+              "className": "mb-2",
+              "onEvent": {
+                "click": {
+                  "actions": [
+                    {
+                      "componentId": "select_reload",
+                      "actionType": "reload",
+                    }
+                  ],
+                  "debounce": {
+                    "wait": 200
+                  }
+                }
+              }
+            }
+          ]
+        },
+        {
+            "name": "watchField",
+            "type": "input-text",
+            "label": "监听字段刷新",
+            "mode": "horizontal",
+            "placeholder": "输入内容刷新Select数据源",
+            "onEvent": {
+            "change": {
+              "actions": [
+                {
+                  "componentId": "select_reload",
+                  "actionType": "reload",
+                }
+              ],
+              "debounce": {
+                "wait": 250
+              }
+            }
+          }
+        },
+        {
+            "label": "Select",
+            "type": "select",
+            "name": "select",
+            "id": "select_reload",
+            "mode": "horizontal",
+            "source": "/api/mock2/form/getOptions?waitSeconds=3",
+            "multiple": true,
+            "clearable": true
+        }
+    ]
+}
+```

packages/amis-ui/src/components/Select.tsx

@@ -477,7 +477,12 @@ export class Select extends React.Component<SelectProps, SelectState> {
 
   @autobind
   open() {
-    this.props.disabled ||
+    const {disabled, loading} = this.props;
+
+    if (disabled || loading) {
+      return;
+    }
+
     this.setState(
       {
         isOpen: true,
@@ -505,15 +510,18 @@ export class Select extends React.Component<SelectProps, SelectState> {
 
   @autobind
   toggle(e?: React.MouseEvent<HTMLDivElement>) {
+    const {disabled, loading} = this.props;
+
     if (
-      e &&
+      (e &&
         this.menu.current &&
-      this.menu.current.contains(e.target as HTMLElement)
+        this.menu.current.contains(e.target as HTMLElement)) ||
+      disabled ||
+      loading
     ) {
       return;
     }
 
-    this.props.disabled ||
     this.setState(
       {
         isOpen: !this.state.isOpen,
@@ -525,18 +533,13 @@ export class Select extends React.Component<SelectProps, SelectState> {
 
   @autobind
   onFocus(e: any) {
-    const {simpleValue} = this.props;
-    const {selection} = this.state;
+    const {simpleValue, disabled, loading} = this.props;
+    const {selection, isOpen} = this.state;
     const value = simpleValue ? selection.map(item => item.value) : selection;
 
-    this.props.disabled ||
-      this.state.isOpen ||
-      this.setState(
-        {
-          isFocused: true
-        },
-        this.focus
-      );
+    if (!disabled && !loading && !isOpen) {
+      this.setState({isFocused: true}, this.focus);
+    }
 
     this.props.onFocus &&
       this.props.onFocus({
@@ -1345,7 +1348,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
                   [`Select--searchable`]: searchable,
                   'is-opened': isOpen,
                   'is-focused': this.state.isFocused,
-                  'is-disabled': disabled,
+                  'is-disabled': disabled || loading,
                   'is-mobile': mobileUI,
                   'is-error': hasError,
                   [`Select--border${ucFirst(borderMode)}`]: borderMode