chore: 人员选择组件关闭下拉框后清空搜索结果 (#5658)

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

@@ -912,6 +912,7 @@ leftOptions 动态加载，默认 source 接口是返回 options 部分，而 le
       "selectMode": "associated",
       "leftMode": "tree",
       "source": "/api/mock2/form/departUser",
+      "searchApi": '/api/mock2/form/departUserSearch?term=${term}',
       "deferApi": "/api/mock2/form/departUser?ref=${ref}&dep=${value}"
     }
   ]

mock/cfc/mock/form/departUserSearch.js

@@ -0,0 +1,74 @@
+// 与departUser.js中的users一致
+const users = [
+  {
+    label: '用户 1',
+    value: 'user1'
+  },
+  {
+    label: '用户 2',
+    value: 'user2'
+  },
+  {
+    label: '用户 a',
+    value: 'usera'
+  },
+  {
+    label: '用户 b',
+    value: 'userb'
+  },
+  {
+    label: '用户 x',
+    value: 'userx'
+  },
+  {
+    label: '用户 y',
+    value: 'usery'
+  },
+  {
+    label: '用户 I',
+    value: 'useri'
+  },
+  {
+    label: '用户 II',
+    value: 'userii'
+  },
+  {
+    label: '用户一',
+    value: 'useryi'
+  },
+  {
+    label: '用户二',
+    value: 'userer'
+  },
+  {
+    label: '用户k',
+    value: 'userk'
+  },
+  {
+    label: '用户j',
+    value: 'userj'
+  }
+];
+
+module.exports = function (req, res) {
+  // 关键词为term
+  if (req.query.term) {
+    const result = users.find(item => item.value === req.query.term);
+
+    res.json({
+      status: 0,
+      msg: '',
+      data: {
+        options: result ? [result] : []
+      }
+    });
+  }
+
+  res.json({
+    status: 0,
+    msg: '',
+    data: {
+      options: users
+    }
+  });
+};

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

@@ -16,6 +16,10 @@ export interface PopOverContainerProps {
   popOverClassName?: string;
   useMobileUI?: boolean;
   placement?: string;
+  /** Popover层隐藏前触发的事件 */
+  onBeforeHide?: () => void;
+  /** Popover层隐藏后触发的事件 */
+  onAfterHide?: () => void;
 }
 
 export interface PopOverContainerState {
@@ -46,9 +50,19 @@ export class PopOverContainer extends React.Component<
 
   @autobind
   close() {
+    const {onBeforeHide, onAfterHide} = this.props;
+
+    if (onBeforeHide && typeof onBeforeHide === 'function') {
+      onBeforeHide?.();
+    }
+
     this.setState({
       isOpened: false
     });
+
+    if (onAfterHide && typeof onAfterHide === 'function') {
+      onAfterHide?.();
+    }
   }
 
   @autobind

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

@@ -1,7 +1,7 @@
 import {localeable} from 'amis-core';
 import {themeable} from 'amis-core';
 import {Transfer, TransferProps} from './Transfer';
-import {uncontrollable} from 'amis-core';
+import {uncontrollable, autobind} from 'amis-core';
 import React from 'react';
 import ResultBox from './ResultBox';
 import {Icon} from './icons';
@@ -23,6 +23,11 @@ export interface TransferDropDownProps extends TransferProps {
 }
 
 export class TransferDropDown extends Transfer<TransferDropDownProps> {
+  @autobind
+  handleAfterPopoverHide() {
+    this.setState({inputValue: '', searchResult: null});
+  }
+
   render() {
     const {
       classnames: cx,
@@ -43,10 +48,11 @@ export class TransferDropDown extends Transfer<TransferDropDownProps> {
       overflowTagPopover
     } = this.props;
     const {inputValue, searchResult} = this.state;
-
     const mobileUI = useMobileUI && isMobile();
+
     return (
       <PopOverContainer
+        onAfterHide={this.handleAfterPopoverHide}
         useMobileUI={useMobileUI}
         popOverContainer={popOverContainer}
         popOverClassName={cx('TransferDropDown-popover')}