From 2fe062c49e9463ea58a237155855af2e76c4f5a9 Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Tue, 4 Aug 2026 07:36:47 -0700
Subject: [PATCH] Fix dialog context error in language popover by using
 DialogTrigger

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 src/components/input/LanguageButton.tsx | 39 +++++++++++++------------
 1 file changed, 21 insertions(+), 18 deletions(-)

diff --git a/src/components/input/LanguageButton.tsx b/src/components/input/LanguageButton.tsx
index bf5c9ff26..53fca3063 100644
--- a/src/components/input/LanguageButton.tsx
+++ b/src/components/input/LanguageButton.tsx
@@ -1,4 +1,4 @@
-import { Button, Dialog, Grid, Icon, MenuTrigger, Popover, Text } from '@umami/react-zen';
+import { Button, Dialog, DialogTrigger, Grid, Icon, Popover, Text } from '@umami/react-zen';
 import { Globe } from 'lucide-react';
 import { useLocale } from '@/components/hooks';
 import { languages } from '@/lib/lang';
@@ -7,12 +7,13 @@ export function LanguageButton() {
   const { locale, saveLocale } = useLocale();
   const items = Object.keys(languages).map(key => ({ ...languages[key], value: key }));
 
-  function handleSelect(value: string) {
+  function handleSelect(value: string, close: () => void) {
     saveLocale(value);
+    close();
   }
 
   return (
-    <MenuTrigger key="language">
+    <DialogTrigger key="language">
       <Button variant="quiet">
         <Icon color="primary">
           <Globe />
@@ -20,22 +21,24 @@ export function LanguageButton() {
       </Button>
       <Popover side="bottom" align="end">
         <Dialog>
-          <Grid columns="repeat(3, minmax(200px, 1fr))" overflow="hidden">
-            {items.map(({ value, label }) => {
-              return (
-                <Button key={value} variant="quiet" onPress={() => handleSelect(value)}>
-                  <Text
-                    weight={value === locale ? 'bold' : 'medium'}
-                    color={value === locale ? undefined : 'muted'}
-                  >
-                    {label}
-                  </Text>
-                </Button>
-              );
-            })}
-          </Grid>
+          {({ close }) => (
+            <Grid columns="repeat(3, minmax(200px, 1fr))" overflow="hidden">
+              {items.map(({ value, label }) => {
+                return (
+                  <Button key={value} variant="quiet" onPress={() => handleSelect(value, close)}>
+                    <Text
+                      weight={value === locale ? 'bold' : 'medium'}
+                      color={value === locale ? undefined : 'muted'}
+                    >
+                      {label}
+                    </Text>
+                  </Button>
+                );
+              })}
+            </Grid>
+          )}
         </Dialog>
       </Popover>
-    </MenuTrigger>
+    </DialogTrigger>
   );
 }