From 15dd28356bdbaf62c9aa227dd5e2cde8481d665f Mon Sep 17 00:00:00 2001
From: Kang Nahoon <49896157+ejrtks1020@users.noreply.github.com>
Date: Tue, 17 Jun 2025 03:05:17 +0900
Subject: [PATCH] fix: Modify the style of the AsyncDropdown component (#4642)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* bugfix/Modify the style of the AsyncDropdown component to adjust its width based on the multiple property. #4641

* style: fix linter warning

* style: fix linter warning

* style: fix linter warning

---------

Co-authored-by: 강나훈 <nahoon.kang@mnc.ai>
---
 .../ui-component/dropdown/AsyncDropdown.jsx   | 21 ++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/packages/ui/src/ui-component/dropdown/AsyncDropdown.jsx b/packages/ui/src/ui-component/dropdown/AsyncDropdown.jsx
index bf4c8bb1..8a7685ea 100644
--- a/packages/ui/src/ui-component/dropdown/AsyncDropdown.jsx
+++ b/packages/ui/src/ui-component/dropdown/AsyncDropdown.jsx
@@ -5,7 +5,7 @@ import axios from 'axios'
 
 // Material
 import Autocomplete, { autocompleteClasses } from '@mui/material/Autocomplete'
-import { Popper, CircularProgress, TextField, Box, Typography } from '@mui/material'
+import { Popper, CircularProgress, TextField, Box, Typography, Tooltip } from '@mui/material'
 import { useTheme, styled } from '@mui/material/styles'
 
 // API
@@ -175,7 +175,7 @@ export const AsyncDropdown = ({
                 multiple={multiple}
                 filterSelectedOptions={multiple}
                 size='small'
-                sx={{ mt: 1, width: '100%' }}
+                sx={{ mt: 1, width: multiple ? '90%' : '100%' }}
                 open={open}
                 onOpen={() => {
                     setOpen(true)
@@ -210,7 +210,8 @@ export const AsyncDropdown = ({
                     const matchingOptions = multiple
                         ? findMatchingOptions(options, internalValue)
                         : [findMatchingOptions(options, internalValue)].filter(Boolean)
-                    return (
+
+                    const textField = (
                         <TextField
                             {...params}
                             value={internalValue}
@@ -255,6 +256,20 @@ export const AsyncDropdown = ({
                             }}
                         />
                     )
+
+                    return !multiple ? (
+                        textField
+                    ) : (
+                        <Tooltip
+                            title={
+                                typeof internalValue === 'string' ? internalValue.replace(/[[\]"]/g, '').replace(/,/g, ', ') : internalValue
+                            }
+                            placement='top'
+                            arrow
+                        >
+                            {textField}
+                        </Tooltip>
+                    )
                 }}
                 renderOption={(props, option) => (
                     <Box component='li' {...props} sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>