Enhances TreeSelect chip display and clear functionality

Improves the display of selected items in the TreeSelect component by using the item label if available and different from the value, otherwise uses a mapping to ensure correct labels are shown, even when the dropdown is closed.

Also, fixes an issue where the search input wasn't cleared correctly when clicking the clear icon in the search input. It now properly clears the search text and resets the search.

components/Ui/Input/TreeSelect.vue

@@ -39,7 +39,7 @@ et sélectionner des éléments organisés en catégories et sous-catégories.
         class="mx-2 my-2"
         @click.stop
         @input="onSearchInput"
-        @click:clear="onSearchInput"
+        @click:clear.stop="onSearchClear"
       />
       <v-divider class="mt-2"/>
     </template>
@@ -51,7 +51,8 @@ et sélectionner des éléments organisés en catégories et sous-catégories.
         closable
         @click:close="removeItem(item.raw.value!)"
       >
-        {{ item.raw.label }}
+        <!-- Use the label from the item if available, otherwise use the mapping -->
+        {{ item.raw.label && item.raw.label !== item.raw.value ? item.raw.label : selectedItemsMap[item.raw.value] || item.raw.value }}
       </v-chip>
       <span
         v-if="maxVisibleChips && index === maxVisibleChips && modelValue.length > maxVisibleChips"
@@ -267,6 +268,11 @@ const onSearchInput = () => {
   }
 }
 
+const onSearchClear = () => {
+  searchText.value = ''
+  onSearchInput()
+}
+
 /**
  * Checks if any word in the normalized text starts with the normalized search term.
  *
@@ -450,6 +456,28 @@ const flattenedItems = computed(() => {
 
   return buildNormalModeList()
 })
+
+/**
+ * A computed property that maps selected values to their corresponding labels.
+ * This is used to display the correct labels in the chips when the dropdown is closed.
+ *
+ * @returns {Record<string, string>} A map of selected values to their labels.
+ */
+const selectedItemsMap = computed(() => {
+  const map: Record<string, string> = {}
+
+  // Find all selectable items (type 'item') in the original items array
+  const selectableItems = props.items.filter(item => item.type === 'item' && item.value)
+
+  // Create a map of values to labels
+  selectableItems.forEach(item => {
+    if (item.value) {
+      map[item.value] = item.label
+    }
+  })
+
+  return map
+})
 </script>
 
 <style scoped lang="scss">