From 3c5f4433d774cc200a06a6473d8db4cfff7c914b Mon Sep 17 00:00:00 2001
From: yyh <yuanyouhuilyz@gmail.com>
Date: Thu, 30 Apr 2026 12:52:38 +0800
Subject: [PATCH] fix(web): align signin locale menu behavior

---
 .../signin/__tests__/_locale-menu.spec.tsx    |  4 +--
 web/app/signin/_header.tsx                    |  3 +--
 web/app/signin/_locale-menu.tsx               | 27 ++++++++++++-------
 3 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/web/app/signin/__tests__/_locale-menu.spec.tsx b/web/app/signin/__tests__/_locale-menu.spec.tsx
index e43587033f..86edd69cf8 100644
--- a/web/app/signin/__tests__/_locale-menu.spec.tsx
+++ b/web/app/signin/__tests__/_locale-menu.spec.tsx
@@ -57,7 +57,7 @@ describe('LocaleMenu', () => {
       await user.click(screen.getByRole('button', { name: /english \(us\)/i }))
       await user.click(screen.getByRole('menuitemradio', { name: '日本語' }))
 
-      expect(onChange).toHaveBeenCalledWith('ja-JP', expect.anything())
+      expect(onChange).toHaveBeenCalledWith('ja-JP')
     })
 
     it('should render all locale options when menu is opened', async () => {
@@ -93,7 +93,7 @@ describe('LocaleMenu', () => {
       await user.click(screen.getByRole('button', { name: /english \(us\)/i }))
       await user.click(screen.getByRole('menuitemradio', { name: '简体中文' }))
 
-      expect(screen.getByRole('menuitemradio', { name: '简体中文' })).toBeInTheDocument()
+      expect(screen.queryByRole('menuitemradio', { name: '简体中文' })).not.toBeInTheDocument()
     })
 
     it('should render no options when items are empty', async () => {
diff --git a/web/app/signin/_header.tsx b/web/app/signin/_header.tsx
index c589513d61..22a05c8d2d 100644
--- a/web/app/signin/_header.tsx
+++ b/web/app/signin/_header.tsx
@@ -1,5 +1,4 @@
 'use client'
-import type { Locale } from '@/i18n-config'
 import { useSuspenseQuery } from '@tanstack/react-query'
 import Divider from '@/app/components/base/divider'
 import { useLocale } from '@/context/i18n'
@@ -39,7 +38,7 @@ const Header = () => {
           value={locale}
           items={languages.filter(item => item.supported)}
           onChange={(value) => {
-            setLocaleOnClient(value as Locale, false)
+            setLocaleOnClient(value, false)
           }}
         />
         <Divider type="vertical" className="mx-0 ml-2 h-4" />
diff --git a/web/app/signin/_locale-menu.tsx b/web/app/signin/_locale-menu.tsx
index be63286b37..5f72a51eb9 100644
--- a/web/app/signin/_locale-menu.tsx
+++ b/web/app/signin/_locale-menu.tsx
@@ -1,5 +1,3 @@
-'use client'
-
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -9,18 +7,28 @@ import {
   DropdownMenuTrigger,
 } from '@langgenius/dify-ui/dropdown-menu'
 
-type LocaleMenuProps = {
-  items: Array<{ value: string, name: string }>
-  value?: string
-  onChange?: (value: string) => void
+type LocaleMenuItem<T extends string> = {
+  value: T
+  name: string
 }
 
-export default function LocaleMenu({
+type LocaleMenuProps<T extends string> = {
+  items: Array<LocaleMenuItem<T>>
+  value?: T
+  onChange?: (value: T) => void
+}
+
+export default function LocaleMenu<T extends string>({
   items,
   value,
   onChange,
-}: LocaleMenuProps) {
+}: LocaleMenuProps<T>) {
   const selectedItem = items.find(item => item.value === value)
+  const handleValueChange = (nextValue: string) => {
+    const nextItem = items.find(item => item.value === nextValue)
+    if (nextItem)
+      onChange?.(nextItem.value)
+  }
 
   return (
     <div className="w-56 text-right">
@@ -45,11 +53,12 @@ export default function LocaleMenu({
           sideOffset={8}
           popupClassName="w-[200px]"
         >
-          <DropdownMenuRadioGroup value={value} onValueChange={onChange}>
+          <DropdownMenuRadioGroup value={value} onValueChange={handleValueChange}>
             {items.map(item => (
               <DropdownMenuRadioItem
                 key={item.value}
                 value={item.value}
+                closeOnClick
                 className="px-3 py-2 text-sm text-text-secondary"
               >
                 <span className="grow truncate">{item.name}</span>