fix Mentions not hide when mentions lose focuse

fix ant-design/ant-design#18921

Author: zombieJ

src/DropdownMenu.tsx

@@ -19,6 +19,7 @@ class DropdownMenu extends React.Component<DropdownMenuProps, {}> {
     setActiveIndex,
     selectOption,
     onFocus,
+    onBlur,
   }: MentionsContextProps) => {
     const { prefixCls, options } = this.props;
     const activeOption = options[activeIndex] || {};
@@ -32,6 +33,7 @@ class DropdownMenu extends React.Component<DropdownMenuProps, {}> {
           selectOption(option);
         }}
         onFocus={onFocus}
+        onBlur={onBlur}
       >
         {options.map((option, index) => {
           const { value, disabled, children, className, style } = option;

src/Mentions.tsx

@@ -219,6 +219,10 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
     this.onFocus();
   };
 
+  public onDropdownBlur = () => {
+    this.onBlur();
+  };
+
   public onFocus = (event?: React.FocusEvent<HTMLTextAreaElement>) => {
     window.clearTimeout(this.focusId);
     const { isFocus } = this.state;
@@ -229,7 +233,7 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
     this.setState({ isFocus: true });
   };
 
-  public onBlur = (event: React.FocusEvent<HTMLTextAreaElement>) => {
+  public onBlur = (event?: React.FocusEvent<HTMLTextAreaElement>) => {
     this.focusId = window.setTimeout(() => {
       const { onBlur } = this.props;
       this.setState({ isFocus: false });
@@ -373,6 +377,7 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
                 setActiveIndex: this.setActiveIndex,
                 selectOption: this.selectOption,
                 onFocus: this.onDropdownFocus,
+                onBlur: this.onDropdownBlur,
               }}
             >
               <KeywordTrigger

src/MentionsContext.ts

@@ -8,7 +8,8 @@ export interface MentionsContextProps {
   activeIndex: number;
   setActiveIndex: (index: number) => void;
   selectOption: (option: OptionProps) => void;
-  onFocus: () => void;
+  onFocus: React.FocusEventHandler<HTMLElement>;
+  onBlur: React.FocusEventHandler<HTMLElement>;
 }
 
 // We will never use default, here only to fix TypeScript warning