diff --git a/src/features/i18n/components/LanguageSwitchButton.vue b/src/features/i18n/components/LanguageSwitchButton.vue index 3030a1f..3180a81 100644 --- a/src/features/i18n/components/LanguageSwitchButton.vue +++ b/src/features/i18n/components/LanguageSwitchButton.vue @@ -22,6 +22,7 @@ import { loadLanguage, LANGUAGES_RTL } from '@/i18n'; const { t, locale } = useI18n(); const isOpen = ref(false); +const languageDropdown = ref(null); const languages = [ { code: 'en', flag: '🇬🇧' }, @@ -41,24 +42,37 @@ async function selectLanguage(code) { localStorage.setItem('locale', code); document.documentElement.lang = code; document.documentElement.dir = LANGUAGES_RTL.includes(code) ? 'rtl' : 'ltr'; + close(); +}; + +const close = function () { + document.removeEventListener('click', closeWrapperOnClickOutsite); isOpen.value = false; -} +}; -function toggle() { - isOpen.value = !isOpen.value; -} +const closeWrapperOnClickOutsite = function (e) { + if (languageDropdown.value) { + if (!languageDropdown.value.contains(e.target)) { + close(); + }; + }; +}; -function closeOnBlur() { - // A short delay so that the click on the option can be registered - setTimeout(() => { isOpen.value = false; }, 150); -} +const open = function () { + if (!isOpen.value) { + isOpen.value = true; + setTimeout(() => { + document.addEventListener('click', closeWrapperOnClickOutsite); + }, 0); + }; +};