vinet/viossa.net
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

feat: locale picker closes if unfocused

Browse source
This commit is contained in:
Benjamin Singleton 2025-06-14 12:20:15 -05:00
parent 3c1a9db3a5
commit 3b74fc00f1
1 changed files with 26 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

28
apps/vdn-static/src/components/organisms/LocalePicker.vue
View file

@ -1,8 +1,9 @@
<script setup lang="ts">
import { LOCALE_IDS, localeId, useLocale, type LocaleId } from "@/i18n";
import { ref } from "vue";
import { onMounted, onUnmounted, ref, useTemplateRef } from "vue";
const isOpen = ref<boolean>(false);
const dropdownRef = useTemplateRef("dropdown");
const toggleOpen = (): void => {
isOpen.value = !isOpen.value;
@ -11,10 +12,33 @@ const toggleOpen = (): void => {
const setLocaleId = (id: LocaleId): void => {
localeId.value = id;
};
const detectFocus = (e: MouseEvent) => {
if (!isOpen) {
return;
}
const dropdown = dropdownRef.value;
if (!dropdown) {
return;
}
const { target } = e;
const focused =
target instanceof Node
&& (dropdown === target || dropdown.contains(target));
if (!focused) {
isOpen.value = false;
}
};
onMounted(() => window.addEventListener("click", detectFocus));
onUnmounted(() => window.removeEventListener("click", detectFocus));
</script>
<template>
<div :class="['dropdown', isOpen && 'is-active']">
<div :class="['dropdown', isOpen && 'is-active']" ref="dropdown">
<div class="dropdown-trigger">
<button
class="button"