diff --git a/packages/amis-ui/scss/components/form/_selection.scss b/packages/amis-ui/scss/components/form/_selection.scss
index b912139b2..7a3aae4d7 100644
--- a/packages/amis-ui/scss/components/form/_selection.scss
+++ b/packages/amis-ui/scss/components/form/_selection.scss
@@ -476,4 +476,8 @@
   &-input.is-active &-caret {
     transform: rotate(180deg);
   }
+
+  &-searchbox.is-active {
+    width: 100%;
+  }
 }
diff --git a/packages/amis-ui/src/components/DropDownSelection.tsx b/packages/amis-ui/src/components/DropDownSelection.tsx
index 27ece3c7e..00251c6e9 100644
--- a/packages/amis-ui/src/components/DropDownSelection.tsx
+++ b/packages/amis-ui/src/components/DropDownSelection.tsx
@@ -101,17 +101,20 @@ class DropDownSelection extends BaseSelection<
       loadingConfig,
       popOverContainer,
       testIdBuilder,
-      mobileUI
+      mobileUI,
+      classPrefix: ns
     } = this.props;
 
     return (
       <PopOverContainer
         mobileUI={mobileUI}
+        overlayWidthField="width"
         popOverContainer={popOverContainer || (() => findDOMNode(this))}
         popOverRender={({onClose}) => (
           <div>
             {searchable ? (
               <SearchBox
+                className={cx(`${ns}DropDownSelection-searchbox`)}
                 mini={false}
                 onSearch={this.onSearch}
                 testIdBuilder={testIdBuilder?.getChild('searchbox')}