From 4e53e7ea10c762544f23dc3e6c6b9f626b00daaa Mon Sep 17 00:00:00 2001
From: Matt <matt@letsbe.solutions>
Date: Sun, 10 Aug 2025 14:54:37 +0200
Subject: [PATCH] fixes

---
 components/MultipleNationalityInput.vue | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/components/MultipleNationalityInput.vue b/components/MultipleNationalityInput.vue
index 6b801c0..adb9c28 100644
--- a/components/MultipleNationalityInput.vue
+++ b/components/MultipleNationalityInput.vue
@@ -215,7 +215,6 @@
 
 <script setup lang="ts">
 import { getAllCountries, searchCountries } from '~/utils/countries';
-import { useMobileDetection } from '~/composables/useMobileDetection';
 
 interface Props {
   modelValue?: string; // Comma-separated string like "FR,MC,US"
@@ -241,10 +240,10 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<Emits>();
 
-// Use unified mobile detection
-const mobileDetection = useMobileDetection();
-const isMobileSafari = computed(() => mobileDetection.isMobileSafari);
-const needsPerformanceMode = computed(() => mobileDetection.isMobileSafari || mobileDetection.isMobile);
+// Static mobile detection (no reactive dependencies)
+const isMobile = ref(false);
+const isMobileSafari = ref(false);
+const needsPerformanceMode = ref(false);
 
 // Parse initial nationalities from comma-separated string
 const parseNationalities = (value: string): string[] => {
@@ -375,6 +374,14 @@ watch(nationalities, () => {
 
 // Initialize the model value on mount if needed
 onMounted(() => {
+  // Apply static device detection - no reactive dependencies
+  const { isMobile: deviceIsMobile, isIos, isSafari } = useDevice();
+  
+  // Set static values once
+  isMobile.value = deviceIsMobile || false;
+  isMobileSafari.value = (deviceIsMobile && isIos && isSafari) || false;
+  needsPerformanceMode.value = isMobileSafari.value || isMobile.value;
+  
   if (!props.modelValue && validNationalities.value.length > 0) {
     updateNationalities();
   }