fix: Select组件设置labelField和maxTagCount时剩余标签数量不显示问题 Close: #8893

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

@@ -1187,6 +1187,38 @@ leftOptions 动态加载，默认 source 接口是返回 options 部分，而 le
 }
 ```
 
+## 自动补全 autoComplete
+
+可以在`autoComplete`配置中，用数据映射，获取变量`term`，为当前输入的关键字。
+
+```schema: scope="body"
+{
+    "type": "form",
+    "body": [
+        {
+            "name": "select1",
+            "type": "select",
+            "label": "选项自动补全（单选）",
+            "autoComplete": "/api/mock2/options/autoComplete?term=${term}",
+            "placeholder": "请输入",
+            "clearable": true
+        },
+        {
+            "name": "select2",
+            "type": "select",
+            "label": "选项自动补全（多选）",
+            "autoComplete": "/api/mock2/options/autoComplete?labelField=name&valueField=id&term=${term}",
+            "placeholder": "请输入",
+            "labelField": "name",
+            "valueField": "id",
+            "clearable": true,
+            "multiple": true,
+            "maxTagCount": 2
+        }
+    ]
+}
+```
+
 ## 属性表
 
 除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置

mock/cfc/mock/options/autoComplete.js

@@ -31,15 +31,18 @@ const db = [
 ];
 
 module.exports = function (req, res) {
+  const labelField = req.query.labelField || 'label';
+  const valueField = req.query.valueField || 'value';
   const term = req.query.term || '';
+  const list = db.map(item => ({[labelField]: item.label, [valueField]: item.value}))
 
   res.json({
     status: 0,
     msg: '',
     data: term
-      ? db.filter(function (item) {
+      ? list.filter(function (item) {
           return term ? ~item.label.indexOf(term) : false;
         })
-      : db
+      : list
   });
 };

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

@@ -657,11 +657,19 @@ export class Select extends React.Component<SelectProps, SelectState> {
     }
   }
 
+  /**
+   * DownShift中ESC按键动作会触发change事件，此时selectItem为null，需要单独处理，参考：
+   * {@link https://github.com/downshift-js/downshift/issues/719 GitHub Issue #719}
+   */
   @autobind
   handleChange(selectItem: any) {
     const {onChange, multiple, simpleValue, valueField} = this.props;
     let {selection} = this.state;
 
+    if (selectItem == null) {
+      return;
+    }
+
     if (multiple) {
       const selectionValues = selection.map(item => item[valueField]);
       selection = selection.concat();
@@ -785,6 +793,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
       translate: __
     } = this.props;
     const selection = this.state.selection;
+    const labelKey = labelField || 'label';
 
     if (!selection.length) {
       return (
@@ -815,7 +824,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
       };
       return [
         ...selection.slice(0, maxVisibleCount),
-        {label: `+ ${selection.length - maxVisibleCount} ...`}
+        {[labelKey]: `+ ${selection.length - maxVisibleCount} ...`}
       ].map((item, index) => {
         if (index === maxVisibleCount) {
           return (
@@ -843,7 +852,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
                             <span className={cx('Select-valueLabel')}>
                               {renderValueLabel
                                 ? renderValueLabel(item)
-                                : item[labelField || 'label']}
+                                : item[labelKey]}
                             </span>
                             <span
                               className={cx('Select-valueIcon', {
@@ -870,9 +879,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
                 } /** 避免点击查看浮窗时呼出下拉菜单 */
               >
                 <span className={cx('Select-valueLabel')}>
-                  {renderValueLabel
-                    ? renderValueLabel(item)
-                    : item[labelField || 'label']}
+                  {renderValueLabel ? renderValueLabel(item) : item[labelKey]}
                 </span>
               </div>
             </TooltipWrapper>
@@ -883,7 +890,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
           <TooltipWrapper
             container={popOverContainer}
             placement={'top'}
-            tooltip={item[labelField || 'label']}
+            tooltip={item[labelKey]}
             trigger={'hover'}
             key={index}
           >
@@ -894,9 +901,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
               })}
             >
               <span className={cx('Select-valueLabel')}>
-                {renderValueLabel
-                  ? renderValueLabel(item)
-                  : item[labelField || 'label']}
+                {renderValueLabel ? renderValueLabel(item) : item[labelKey]}
               </span>
               <span
                 className={cx('Select-valueIcon', {
@@ -922,22 +927,18 @@ export class Select extends React.Component<SelectProps, SelectState> {
             })}
             key={index}
           >
-            {renderValueLabel
-              ? renderValueLabel(item)
-              : item[labelField || 'label']}
+            {renderValueLabel ? renderValueLabel(item) : item[labelKey]}
           </div>
         );
       }
 
       return valuesNoWrap ? (
-        `${item[labelField || 'label']}${
-          index === selection.length - 1 ? '' : ' + '
-        }`
+        `${item[labelKey]}${index === selection.length - 1 ? '' : ' + '}`
       ) : (
         <TooltipWrapper
           container={popOverContainer}
           placement={'top'}
-          tooltip={item[labelField || 'label']}
+          tooltip={item[labelKey]}
           trigger={'hover'}
           key={index}
         >
@@ -948,9 +949,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
             })}
           >
             <span className={cx('Select-valueLabel')}>
-              {renderValueLabel
-                ? renderValueLabel(item)
-                : item[labelField || 'label']}
+              {renderValueLabel ? renderValueLabel(item) : item[labelKey]}
             </span>
             <span
               className={cx('Select-valueIcon', {
@@ -978,7 +977,6 @@ export class Select extends React.Component<SelectProps, SelectState> {
     const {
       popOverContainer,
       options,
-      value,
       valueField,
       labelField,
       noResultsText,