diff --git a/packages/amis-ui/scss/components/_input-box.scss b/packages/amis-ui/scss/components/_input-box.scss index 0cbfa5ff9..ee26fea39 100644 --- a/packages/amis-ui/scss/components/_input-box.scss +++ b/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; diff --git a/packages/amis-ui/src/components/InputBox.tsx b/packages/amis-ui/src/components/InputBox.tsx index 310ad90aa..058f7af3d 100644 --- a/packages/amis-ui/src/components/InputBox.tsx +++ b/packages/amis-ui/src/components/InputBox.tsx @@ -134,13 +134,13 @@ export class InputBox extends React.Component { /> )} - {children} - {clearable && !disabled && value ? ( ) : null} + + {children} ); } diff --git a/packages/amis-ui/src/components/InputBoxWithSuggestion.tsx b/packages/amis-ui/src/components/InputBoxWithSuggestion.tsx index d4c80e5af..b70a8fad2 100644 --- a/packages/amis-ui/src/components/InputBoxWithSuggestion.tsx +++ b/packages/amis-ui/src/components/InputBoxWithSuggestion.tsx @@ -45,7 +45,7 @@ export class InputBoxWithSuggestion extends React.Component item.value !== this.props.value) : options; } @@ -67,7 +67,8 @@ export class InputBoxWithSuggestion extends React.Component findDOMNode(this))} popOverRender={({onClose}) => ( <> @@ -96,7 +98,11 @@ export class InputBoxWithSuggestion extends React.Component {({onClick, ref, isOpened}) => ( - - - + {options.length ? ( + + + + ) : null} )} diff --git a/packages/amis-ui/src/components/PopOverContainer.tsx b/packages/amis-ui/src/components/PopOverContainer.tsx index d4210c56a..372c09ed4 100644 --- a/packages/amis-ui/src/components/PopOverContainer.tsx +++ b/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 ? (