From 3c076415ff90227a0edb1f2450a946b9084a42b6 Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Thu, 30 Oct 2025 14:11:17 -0600
Subject: [PATCH] =?UTF-8?q?Fix:=20Corregir=20error=20de=20toLowerCase=20y?=
 =?UTF-8?q?=20selecci=C3=B3n=20m=C3=BAltiple=20en=20ubicaciones?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Problemas corregidos:

1. Error "Cannot read properties of undefined (reading 'toLowerCase')":
   - Agregar validación para filtrar items undefined/null
   - Verificar que cada item tenga label y value antes de usar toLowerCase
   - Prevenir errores cuando el array de ubicaciones tiene items inválidos

2. Selección múltiple no funcionaba:
   - Mejorar onSelectionChange para manejar diferentes tipos de valores
   - Agregar validación de array antes de procesar
   - Filtrar items null/undefined antes de extraer valores
   - Manejar tanto objetos como strings en el array de valores

3. Tags no aparecían en el input:
   - El problema estaba en el procesamiento de valores seleccionados
   - Ahora maneja correctamente item.value y strings directos

El componente ahora funciona igual que ClienteMultiSelector:
- Sin errores en consola
- Tags visuales aparecen correctamente
- Selección múltiple funciona perfectamente
---
 .../app/components/UbicacionMultiSelector.vue | 20 ++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/nuxt4-app/app/components/UbicacionMultiSelector.vue b/nuxt4-app/app/components/UbicacionMultiSelector.vue
index 8b42cdb..071d7a3 100644
--- a/nuxt4-app/app/components/UbicacionMultiSelector.vue
+++ b/nuxt4-app/app/components/UbicacionMultiSelector.vue
@@ -81,19 +81,33 @@ const selectedUbicacionesObjects = computed(() => {
 const filteredItems = computed((): InputMenuItem[] => {
   const query = searchQuery.value.trim().toLowerCase()
 
+  // Filter out undefined/null items and ensure they have label and value
+  const validUbicaciones = props.ubicaciones.filter(u => u && u.label && u.value)
+
   if (!query) {
-    return props.ubicaciones
+    return validUbicaciones
   }
 
-  return props.ubicaciones.filter(u =>
+  return validUbicaciones.filter(u =>
     u.label.toLowerCase().includes(query)
   )
 })
 
 // Methods
 function onSelectionChange(value: any[]) {
+  if (!Array.isArray(value)) {
+    emit('update:selectedUbicaciones', [])
+    return
+  }
+
   // Extract values from selected items
-  const values = value.map(item => item.value || item)
+  const values = value
+    .filter(item => item && (item.value || typeof item === 'string'))
+    .map(item => {
+      if (typeof item === 'string') return item
+      return item.value || item
+    })
+
   emit('update:selectedUbicaciones', values)
 }