This is an automated email from the ASF dual-hosted git repository. ephraimanierobi pushed a commit to branch v3-1-test in repository https://gitbox.apache.org/repos/asf/airflow.git
commit 7c4aace5f54b8d53c8c35a8111d7ab145fc4fd52 Author: Guan-Ming (Wesley) Chiu <[email protected]> AuthorDate: Sat Jan 31 05:31:43 2026 +0800 [v3-1-test] Fix language selector state not updating on change (#61060) (#61263) (cherry picked from commit 975cfe62cd2bd35b795052104d94af497eab388d) --- .../ui/src/layouts/Nav/LanguageSelector.tsx | 37 ++++++++++++---------- 1 file changed, 20 insertions(+), 17 deletions(-) diff --git a/airflow-core/src/airflow/ui/src/layouts/Nav/LanguageSelector.tsx b/airflow-core/src/airflow/ui/src/layouts/Nav/LanguageSelector.tsx index f270eb0f62d..e4581aebc7e 100644 --- a/airflow-core/src/airflow/ui/src/layouts/Nav/LanguageSelector.tsx +++ b/airflow-core/src/airflow/ui/src/layouts/Nav/LanguageSelector.tsx @@ -18,30 +18,33 @@ */ import { Field, VStack, Box, Text } from "@chakra-ui/react"; import { Select, type SingleValue } from "chakra-react-select"; -import React, { useMemo } from "react"; +import React, { useState, useCallback } from "react"; import { useTranslation } from "react-i18next"; import { supportedLanguages } from "src/i18n/config"; const LanguageSelector: React.FC = () => { const { i18n, t: translate } = useTranslation(); - const options = useMemo( - () => - supportedLanguages.map((lang) => ({ - label: lang.name, - value: lang.code, - })), - [], - ); + const [selectedLang, setSelectedLang] = useState(i18n.resolvedLanguage ?? i18n.language); + + const options = supportedLanguages.map((lang) => ({ + label: lang.name, + value: lang.code, + })); - const handleLanguageChange = (selectedOption: SingleValue<{ label: string; value: string }>) => { - if (selectedOption) { - void i18n.changeLanguage(selectedOption.value); - } - }; + const handleLanguageChange = useCallback( + (selectedOption: SingleValue<{ label: string; value: string }>) => { + if (selectedOption) { + void i18n.changeLanguage(selectedOption.value).then(() => { + setSelectedLang(selectedOption.value); + }); + } + }, + [i18n], + ); - const currentLang = options.find((option) => option.value === i18n.language); - const langDir = i18n.dir(i18n.language); + const currentLang = options.find((option) => option.value === selectedLang); + const langDir = i18n.dir(selectedLang); return ( <VStack align="stretch" gap={6}> @@ -65,7 +68,7 @@ const LanguageSelector: React.FC = () => { </Field.Root> <Box borderRadius="md" boxShadow="sm" display="flex" flexDirection="column" gap={2} p={6}> <Text fontSize="lg" fontWeight="bold"> - {currentLang?.label} ({i18n.language}) + {currentLang?.label} ({selectedLang}) </Text> <Text>{`${translate("direction")}: ${langDir.toUpperCase()}`}</Text> </Box>
