From d8fe9806e6bfc2fd24fe9b96677223e314dc345b Mon Sep 17 00:00:00 2001
From: Archer <545436317@qq.com>
Date: Mon, 21 Apr 2025 15:02:54 +0800
Subject: [PATCH] Test select (#4611)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 修复表单单选选中长文本时，文字溢出选择框的问题；修复表单单选下拉选项在移动端界面上触发自动换行时部分文字位于屏幕之外的问题 (#4600)

* fix: 修复表单单选选中长文本时，文字溢出选择框的问题

* fix: 修复表单单选下拉选项在移动端界面上触发自动换行时部分文字位于屏幕之外的问题

* perf: select components

---------

Co-authored-by: mmagi <magizhang@qq.com>
---
 .../web/components/common/MySelect/index.tsx     | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/packages/web/components/common/MySelect/index.tsx b/packages/web/components/common/MySelect/index.tsx
index 3c865f509..32b43c06f 100644
--- a/packages/web/components/common/MySelect/index.tsx
+++ b/packages/web/components/common/MySelect/index.tsx
@@ -166,20 +166,14 @@ const MySelect = <T = any,>(
   const isSelecting = loading || isLoading;
 
   return (
-    <Box
-      css={css({
-        '& div': {
-          width: 'auto !important'
-        }
-      })}
-    >
+    <Box>
       <Menu
         autoSelect={false}
         isOpen={isOpen && !isSelecting}
         onOpen={onOpen}
         onClose={onClose}
         strategy={'fixed'}
-        matchWidth
+        // matchWidth
       >
         <MenuButton
           as={Button}
@@ -191,6 +185,9 @@ const MySelect = <T = any,>(
           size={'md'}
           fontSize={'sm'}
           textAlign={'left'}
+          h={'auto'}
+          whiteSpace={'pre-wrap'}
+          wordBreak={'break-word'}
           _active={{
             transform: 'none'
           }}
@@ -239,7 +236,7 @@ const MySelect = <T = any,>(
         <MenuList
           ref={MenuListRef}
           className={props.className}
-          minW={(() => {
+          w={(() => {
             const w = ButtonRef.current?.clientWidth;
             if (w) {
               return `${w}px !important`;
@@ -248,7 +245,6 @@ const MySelect = <T = any,>(
               ? width.map((item) => `${item} !important`)
               : `${width} !important`;
           })()}
-          w={'auto'}
           px={'6px'}
           py={'6px'}
           border={'1px solid #fff'}