feat(frontend): add reusable search select and wire it into machine creation

fix(frontend): guard custom field persistence against non-string values

app/pages/component/[id]/edit.vue

@@ -347,7 +347,7 @@ const requiredCustomFieldsFilled = computed(() =>
     if (field.type === 'boolean') {
       return field.value === 'true' || field.value === 'false'
     }
-    return field.value !== ''
+    return toFieldString(field.value).trim() !== ''
   }),
 )
 
@@ -358,6 +358,19 @@ const canSubmit = computed(() => Boolean(
   !saving.value,
 ))
 
+const toFieldString = (value: unknown): string => {
+  if (value === null || value === undefined) {
+    return ''
+  }
+  if (typeof value === 'string') {
+    return value
+  }
+  if (typeof value === 'number' || typeof value === 'boolean') {
+    return String(value)
+  }
+  return ''
+}
+
 const fetchComponent = async () => {
   const id = route.params.id
   if (!id || typeof id !== 'string') {
@@ -636,14 +649,14 @@ const shouldPersistField = (field: CustomFieldInput) => {
   if (field.type === 'boolean') {
     return field.value === 'true' || field.value === 'false'
   }
-  return field.value.trim() !== ''
+  return toFieldString(field.value).trim() !== ''
 }
 
 const formatValueForPersistence = (field: CustomFieldInput) => {
   if (field.type === 'boolean') {
     return field.value === 'true' ? 'true' : 'false'
   }
-  return field.value.trim()
+  return toFieldString(field.value).trim()
 }
 
 const saveCustomFieldValues = async (updatedComponent: any) => {

app/pages/component/create.vue

@@ -597,7 +597,7 @@ const requiredCustomFieldsFilled = computed(() =>
     if (field.type === 'boolean') {
       return field.value === 'true' || field.value === 'false'
     }
-    return field.value !== ''
+    return toFieldString(field.value).trim() !== ''
   }),
 )
 
@@ -609,6 +609,19 @@ const canSubmit = computed(() => Boolean(
   !submitting.value,
 ))
 
+const toFieldString = (value: unknown): string => {
+  if (value === null || value === undefined) {
+    return ''
+  }
+  if (typeof value === 'string') {
+    return value
+  }
+  if (typeof value === 'number' || typeof value === 'boolean') {
+    return String(value)
+  }
+  return ''
+}
+
 const getStructureCustomFields = (structure: ComponentModelStructure | null) => {
   return Array.isArray(structure?.customFields) ? structure.customFields : []
 }
@@ -917,13 +930,13 @@ const shouldPersistField = (field: CustomFieldInput) => {
   if (field.type === 'boolean') {
     return field.value === 'true' || field.value === 'false'
   }
-  return field.value.trim() !== ''
+  return toFieldString(field.value).trim() !== ''
 }
 
 const formatValueForPersistence = (field: CustomFieldInput) => {
   if (field.type === 'boolean') {
     return field.value === 'true' ? 'true' : 'false'
   }
-  return field.value.trim()
+  return toFieldString(field.value).trim()
 }
 </script>