From 0545f7e9c448dd76e877fa947850228ecc8880ca Mon Sep 17 00:00:00 2001
From: Matt <matt@letsbe.solutions>
Date: Fri, 8 Aug 2025 13:23:18 +0200
Subject: [PATCH] phone fixes

---
 components/PhoneInputWrapper.vue |  9 ++--
 pages/test-phone.vue             | 87 ++++++++++++++++++++++++++++++++
 2 files changed, 91 insertions(+), 5 deletions(-)
 create mode 100644 pages/test-phone.vue

diff --git a/components/PhoneInputWrapper.vue b/components/PhoneInputWrapper.vue
index 3fb678f..17ac51d 100644
--- a/components/PhoneInputWrapper.vue
+++ b/components/PhoneInputWrapper.vue
@@ -21,10 +21,10 @@
         <v-menu
           v-model="dropdownOpen"
           :close-on-content-click="false"
-          :location="isMobile ? 'bottom' : 'bottom'"
+          location="bottom start"
           :offset="isMobile ? 8 : 4"
-          :max-height="isMobile ? '70vh' : '300'"
-          :full-width="isMobile"
+          :max-height="isMobile ? '70vh' : '300px'"
+          min-width="280"
           :transition="isMobile ? 'slide-y-transition' : 'fade-transition'"
         >
           <template #activator="{ props: menuProps }">
@@ -35,8 +35,7 @@
                 'country-selector--open': dropdownOpen,
                 'country-selector--mobile': isMobile
               }"
-              @click="toggleDropdown"
-              @touchstart="handleTouchStart"
+              @click.stop="toggleDropdown"
             >
               <img
                 :src="flagUrl"
diff --git a/pages/test-phone.vue b/pages/test-phone.vue
new file mode 100644
index 0000000..e225e36
--- /dev/null
+++ b/pages/test-phone.vue
@@ -0,0 +1,87 @@
+<template>
+  <div class="test-page">
+    <v-container>
+      <v-row justify="center">
+        <v-col cols="12" md="8" lg="6">
+          <v-card class="pa-6">
+            <v-card-title>
+              📱 Phone Input Test
+            </v-card-title>
+            
+            <v-card-text>
+              <PhoneInputWrapper
+                v-model="phoneNumber"
+                label="Test Phone Number"
+                placeholder="Click the flag dropdown to test"
+                help-text="The dropdown should open when you click the flag area"
+                @phone-data="handlePhoneData"
+                @country-changed="handleCountryChange"
+              />
+              
+              <v-alert type="info" class="mt-4" v-if="phoneData">
+                <strong>Phone Data:</strong><br>
+                Number: {{ phoneData.number }}<br>
+                Valid: {{ phoneData.isValid ? 'Yes' : 'No' }}<br>
+                Country: {{ phoneData.country.name }} ({{ phoneData.country.iso2 }})<br>
+                Dial Code: {{ phoneData.country.dialCode }}
+              </v-alert>
+              
+              <div class="mt-4">
+                <v-btn @click="testNumber" variant="outlined" color="primary" size="small" class="mr-2">
+                  Test US Number
+                </v-btn>
+                <v-btn @click="resetNumber" variant="outlined" size="small">
+                  Reset
+                </v-btn>
+              </div>
+            </v-card-text>
+          </v-card>
+        </v-col>
+      </v-row>
+    </v-container>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface PhoneData {
+  number: string;
+  isValid: boolean;
+  country: {
+    name: string;
+    iso2: string;
+    dialCode: string;
+  };
+}
+
+const phoneNumber = ref('');
+const phoneData = ref<PhoneData | null>(null);
+
+const handlePhoneData = (data: PhoneData) => {
+  phoneData.value = data;
+  console.log('Phone data updated:', data);
+};
+
+const handleCountryChange = (country: any) => {
+  console.log('Country changed:', country);
+};
+
+const testNumber = () => {
+  phoneNumber.value = '+19179324061';
+};
+
+const resetNumber = () => {
+  phoneNumber.value = '';
+  phoneData.value = null;
+};
+
+definePageMeta({
+  layout: 'dashboard',
+  middleware: 'auth'
+});
+</script>
+
+<style scoped>
+.test-page {
+  padding: 20px 0;
+}
+</style>