From a62371940f98fe0fee4e8b85403736eac96c41fc Mon Sep 17 00:00:00 2001
From: lyzno1 <92089059+lyzno1@users.noreply.github.com>
Date: Tue, 12 Aug 2025 13:29:51 +0800
Subject: [PATCH] fix: remove misleading clear buttons and improve SimpleSelect
 UX (#23791)

---
 web/app/components/base/select/index.tsx      | 23 ++++++++++++++-----
 .../account-setting/language-page/index.tsx   |  2 ++
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/web/app/components/base/select/index.tsx b/web/app/components/base/select/index.tsx
index d9285c106..1f29d5bd6 100644
--- a/web/app/components/base/select/index.tsx
+++ b/web/app/components/base/select/index.tsx
@@ -192,6 +192,7 @@ const SimpleSelect: FC<ISelectProps> = ({
   const localPlaceholder = placeholder || t('common.placeholder.select')
 
   const [selectedItem, setSelectedItem] = useState<Item | null>(null)
+  const [open, setOpen] = useState(false)
 
   useEffect(() => {
     let defaultSelect = null
@@ -220,8 +221,11 @@ const SimpleSelect: FC<ISelectProps> = ({
           <ListboxButton onClick={() => {
               // get data-open, use setTimeout to ensure the attribute is set
               setTimeout(() => {
-                if (listboxRef.current)
-                  onOpenChange?.(listboxRef.current.getAttribute('data-open') !== null)
+                if (listboxRef.current) {
+                  const isOpen = listboxRef.current.getAttribute('data-open') !== null
+                  setOpen(isOpen)
+                  onOpenChange?.(isOpen)
+                }
               })
           }} className={classNames(`flex h-full w-full items-center rounded-lg border-0 bg-components-input-bg-normal pl-3 pr-10 focus-visible:bg-state-base-hover-alt focus-visible:outline-none group-hover/simple-select:bg-state-base-hover-alt sm:text-sm sm:leading-6 ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}`, className)}>
             <span className={classNames('system-sm-regular block truncate text-left text-components-input-text-filled', !selectedItem?.name && 'text-components-input-text-placeholder')}>{selectedItem?.name ?? localPlaceholder}</span>
@@ -240,10 +244,17 @@ const SimpleSelect: FC<ISelectProps> = ({
                   />
                 )
                 : (
-                  <ChevronDownIcon
-                    className="h-4 w-4 text-text-quaternary group-hover/simple-select:text-text-secondary"
-                    aria-hidden="true"
-                  />
+                  open ? (
+                    <ChevronUpIcon
+                      className="h-4 w-4 text-text-quaternary group-hover/simple-select:text-text-secondary"
+                      aria-hidden="true"
+                    />
+                  ) : (
+                    <ChevronDownIcon
+                      className="h-4 w-4 text-text-quaternary group-hover/simple-select:text-text-secondary"
+                      aria-hidden="true"
+                    />
+                  )
                 )}
             </span>
           </ListboxButton>
diff --git a/web/app/components/header/account-setting/language-page/index.tsx b/web/app/components/header/account-setting/language-page/index.tsx
index bf3537b5d..f51b26541 100644
--- a/web/app/components/header/account-setting/language-page/index.tsx
+++ b/web/app/components/header/account-setting/language-page/index.tsx
@@ -70,6 +70,7 @@ export default function LanguagePage() {
           items={languages.filter(item => item.supported)}
           onSelect={item => handleSelectLanguage(item)}
           disabled={editing}
+          notClearable={true}
         />
       </div>
       <div className='mb-8'>
@@ -79,6 +80,7 @@ export default function LanguagePage() {
           items={timezones}
           onSelect={item => handleSelectTimezone(item)}
           disabled={editing}
+          notClearable={true}
         />
       </div>
     </>