style(SearchSelect): 样式调整,下拉菜单比搜索框长 #652 (#689)

uiwjs · Mar 18, 2022 · 1982a14 · 1982a14
1 parent 849b22f
commit 1982a14
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 9 deletions.
diff --git a/packages/react-search-select/README.md b/packages/react-search-select/README.md
@@ -51,7 +51,7 @@ const Demo = () => {
      <Row>
        <SearchSelect
          mode="multiple"
-         style={{ width: 176 }}
+         style={{ width: 200 }}
          showSearch={true}
          labelInValue={true}
          maxTagCount={6}
@@ -72,7 +72,7 @@ const Demo = () => {
      <Row>
        <SearchSelect
          mode="single"
-         style={{ width: 176 }}
+         style={{ width: 200 }}
          showSearch={true}
          labelInValue={true}
          maxTagCount={6}
@@ -196,12 +196,12 @@ const Demo = () => {
       >
         {({ fields, state, canSubmit }) => {
           return (
-            <div>
-              <Row gutter={20}>
-                <Col fixed>{fields.selectField}</Col>
+            <div style={{ marginLeft:10}}>
+              <Row >
+                <Col fixed style={{width:200}}>{fields.selectField}</Col>
               </Row>
-              <Row gutter={20}>
-                <Col fixed>{fields.selectSingle}</Col>
+              <Row>
+                <Col fixed style={{width:200}}>{fields.selectSingle}</Col>
               </Row>
               <Row>
                 <Col fixed>

diff --git a/packages/react-search-select/src/index.tsx b/packages/react-search-select/src/index.tsx
@@ -209,6 +209,7 @@ export default function SearchSelect(props: SearchSelectProps) {
       className={cls}
       trigger="click"
       style={{ marginTop: 5 }}
+      overlayStyl={{ width: 100 }}
       disabled={option && option.length > 0 ? false : true}
       {...others}
       onVisibleChange={onVisibleChange}
@@ -219,9 +220,9 @@ export default function SearchSelect(props: SearchSelectProps) {
           style={{
             minHeight: 25,
             maxHeight: 280,
-            minWidth: 200,
+            minWidth: style?.width ?? 200,
             overflowY: 'scroll',
-            width: divRef.current ? divRef.current.offsetWidth : 'auto',
+            width: style?.width,
           }}
         >
           {!option || option.length === 0 ? (