style: 优化 inputBoxWithSuggestion 的样式

packages/amis-ui/scss/components/_input-box.scss

@@ -39,9 +39,15 @@
   }
 
   &-clear {
+    visibility: hidden;
     @include input-clear();
   }
 
+  &.is-focused &-clear,
+  &:hover &-clear {
+    visibility: visible;
+  }
+
   > svg {
     display: inline-block;
     width: 14px;

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

@@ -134,13 +134,13 @@ export class InputBox extends React.Component<InputBoxProps, InputBoxState> {
           />
         )}
 
-        {children}
-
         {clearable && !disabled && value ? (
           <a onClick={this.clearValue} className={cx('InputBox-clear')}>
             <Icon icon="input-clear" className="icon" />
           </a>
         ) : null}
+
+        {children}
       </div>
     );
   }

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

@@ -45,7 +45,7 @@ export class InputBoxWithSuggestion extends React.Component<InputBoxWithSuggesti
       ? matchSorter(options, this.props.value, {
           keys: ['label', 'value'],
           threshold: matchSorter.rankings.CONTAINS
-        })
+        }).filter((item: any) => item.value !== this.props.value)
       : options;
   }
 
@@ -67,7 +67,8 @@ export class InputBoxWithSuggestion extends React.Component<InputBoxWithSuggesti
       popOverContainer,
       clearable,
       hasError,
-      mobileUI
+      mobileUI,
+      className
     } = this.props;
     const options = this.filterOptions(
       Array.isArray(this.props.options) ? this.props.options : []
@@ -75,6 +76,7 @@ export class InputBoxWithSuggestion extends React.Component<InputBoxWithSuggesti
 
     return (
       <PopOverContainer
+        show={!!options.length}
         popOverContainer={popOverContainer || (() => findDOMNode(this))}
         popOverRender={({onClose}) => (
           <>
@@ -96,7 +98,11 @@ export class InputBoxWithSuggestion extends React.Component<InputBoxWithSuggesti
       >
         {({onClick, ref, isOpened}) => (
           <InputBox
-            className={cx('InputBox--sug', isOpened ? 'is-active' : '')}
+            className={cx(
+              'InputBox--sug',
+              className,
+              isOpened ? 'is-active' : ''
+            )}
             ref={ref}
             placeholder={placeholder}
             disabled={disabled}
@@ -107,9 +113,11 @@ export class InputBoxWithSuggestion extends React.Component<InputBoxWithSuggesti
             hasError={hasError}
             mobileUI={mobileUI}
           >
-            <span className={cx('InputBox-caret')}>
-              <Icon icon="right-arrow-bold" className="icon" />
-            </span>
+            {options.length ? (
+              <span className={cx('InputBox-caret')}>
+                <Icon icon="right-arrow-bold" className="icon" />
+              </span>
+            ) : null}
           </InputBox>
         )}
       </PopOverContainer>

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

@@ -12,6 +12,7 @@ export interface PopOverOverlay {
 }
 
 export interface PopOverContainerProps {
+  show?: boolean;
   children: (props: {
     disabled?: boolean;
     onClick: (e: React.MouseEvent) => void;
@@ -162,14 +163,14 @@ export class PopOverContainer extends React.Component<
     return (
       <>
         {children({
-          isOpened: this.state.isOpened,
+          isOpened: this.state.isOpened && this.props.show !== false,
           onClick: this.handleClick,
           ref: this.targetRef,
           disabled
         })}
         {mobileUI ? (
           <PopUp
-            isShow={this.state.isOpened}
+            isShow={this.state.isOpened && this.props.show !== false}
             container={document.body}
             className={popOverClassName}
             showConfirm={showConfirm}
@@ -183,7 +184,7 @@ export class PopOverContainer extends React.Component<
             container={popOverContainer || this.getParent}
             target={this.getTarget}
             placement={placement || PopOverContainer.alignToPlacement({align})}
-            show={this.state.isOpened}
+            show={this.state.isOpened && this.props.show !== false}
           >
             <PopOver
               overlay