fix: stabilize constructeur selector ui

app/pages/machine/[id].vue

@@ -107,15 +107,17 @@
               </label>
               <ConstructeurSelect
                 v-if="isEditMode"
+                class="w-full"
                 :key="machine.value?.id"
-                v-model="machineConstructeurId"
+                :model-value="machineConstructeurId"
                 placeholder="Rechercher un constructeur..."
+                @update:modelValue="handleMachineConstructeurChange"
               />
               <div v-else class="input input-bordered bg-base-200">
                 <div class="flex flex-col">
-                  <span class="font-medium">{{ machine.value?.constructeur?.name || 'Non défini' }}</span>
+                  <span class="font-medium">{{ machineConstructeurDisplay?.name || 'Non défini' }}</span>
                   <span class="text-xs text-gray-500">
-                    {{ [machine.value?.constructeur?.email, machine.value?.constructeur?.phone].filter(Boolean).join(' • ') }}
+                    {{ [machineConstructeurDisplay?.email, machineConstructeurDisplay?.phone].filter(Boolean).join(' • ') || '' }}
                   </span>
                 </div>
               </div>
@@ -366,6 +368,7 @@ import { getFileIcon } from '~/utils/fileIcons'
 import ComponentHierarchy from '~/components/ComponentHierarchy.vue'
 import DocumentUpload from '~/components/DocumentUpload.vue'
 import ConstructeurSelect from '~/components/ConstructeurSelect.vue'
+import { useConstructeurs } from '~/composables/useConstructeurs'
 
 const route = useRoute()
 const machineId = route.params.id
@@ -401,11 +404,18 @@ const machine = ref(null)
 const components = ref([])
 const pieces = ref([])
 
+const { constructeurs, loadConstructeurs } = useConstructeurs()
+
 // Champs de la machine
 const machineName = ref('')
 const machineReference = ref('')
 const machineEmplacement = ref('')
 const machineConstructeurId = ref(null)
+const machineConstructeurDisplay = computed(() => {
+  const id = machineConstructeurId.value || machine.value?.constructeur?.id || machine.value?.constructeurId
+  if (!id) return machine.value?.constructeur || null
+  return constructeurs.value.find(item => item.id === id) || machine.value?.constructeur || null
+})
 
 // Valeurs des champs personnalisés de la machine
 const machineCustomFieldValues = reactive({})
@@ -413,18 +423,11 @@ const machineCustomFieldValues = reactive({})
 const machineDocumentFiles = ref([])
 const machineDocumentsUploading = ref(false)
 const machineDocumentsLoaded = ref(false)
-const machineConstructeurInitialized = ref(false)
 
-watch(machineConstructeurId, (newValue, oldValue) => {
-  if (!machine.value) return
-  if (!machineConstructeurInitialized.value) {
-    machineConstructeurInitialized.value = true
-    return
-  }
-  if (newValue !== oldValue) {
-    updateMachineInfo()
-  }
-})
+const handleMachineConstructeurChange = async (value) => {
+  machineConstructeurId.value = value
+  await updateMachineInfo()
+}
 
 // Mode d'édition
 const isEditMode = ref(false)
@@ -451,7 +454,6 @@ const initMachineFields = () => {
     machineReference.value = machine.value.reference || ''
     machineEmplacement.value = machine.value.emplacement || ''
     machineConstructeurId.value = machine.value.constructeurId || machine.value.constructeur?.id || null
-    machineConstructeurInitialized.value = false
   }
 }
 
@@ -839,7 +841,10 @@ const toggleEditMode = () => {
 // Lifecycle
 onMounted(() => {
   loadMachineData()
-  
+  if (!constructeurs.value.length) {
+    loadConstructeurs()
+  }
+
   // Vérifier si on doit activer le mode édition depuis l'URL
   const route = useRoute()
   if (route.query.edit === 'true') {