Fix

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue3-hive-ui-kit",
   "private": false,
-  "version": "0.7.17",
+  "version": "0.7.18",
   "type": "module",
   "description": "UI kit for Vue 3",
   "files": [

src/common/hooks/use-list-methods.ts

@@ -82,7 +82,7 @@ export const useListMethods = ({
 
   const updateActiveValue = (value: Value) => {
     activeValue.value = value;
-    let element = menuRef.value?.querySelector(`[data-value='${value}']`);
+    let element = menuRef.value?.querySelector(`[data-value='${JSON.stringify(value)}']`);
     if (element) {
       (element as unknown as HTMLElement).scrollIntoView({
         behavior: 'smooth',
@@ -158,8 +158,9 @@ export const useListMethods = ({
   const setFirstActiveValue = () => {
     for (const key of filteredOptions.value.keys()) {
       updateActiveValue(key);
-      break;
+      return;
     }
+    updateActiveValue(null);
   };
 
   return {

src/components/hive-multiselect/hive-multiselect.vue

@@ -100,6 +100,7 @@ const changeValue = (value: Value) => {
   }
   searchQuery.value = '';
   onUpdateModelValue<Value[]>(emit, currentValue.value);
+  setFirstActiveValue();
 };
 
 const deleteLast = (value: Value) => {
@@ -130,7 +131,7 @@ watch(
     filteredOptions.value = res.filteredOptions.value;
     current.value = res.current.value;
     activeValue.value = res.activeValue.value;
-    res.setFirstActiveValue();
+    setFirstActiveValue();
   },
   { deep: true },
 );
@@ -149,6 +150,10 @@ watch(searchQuery, () => {
   setFirstActiveValue();
 });
 
+watch(filteredOptions, () => {
+  setFirstActiveValue();
+});
+
 const computedPlaceholder = computed(() =>
   current.value ? String(current.value[props.titleField]) : props.isPlaceholderSeenWithValues ? props.placeholder : '',
 );
@@ -222,7 +227,7 @@ onMounted(() => {
             @click="changeValue(item[1][valueField])"
             @mouseover="updateActiveValue(item[1][valueField])"
             @mousedown.prevent
-            :data-value="item[1][valueField]"
+            :data-value="JSON.stringify(item[1][valueField])"
           >
             {{ item[1][titleField] ?? nullTitle }}
           </div>

src/examples/App.vue

@@ -8,19 +8,19 @@ const a = 1;
 </script>
 
 <template>
-  <hive-splitter style="min-height: 100vh">
+  <!-- <hive-splitter style="min-height: 100vh">
     <hive-pane id="light">
       <all-widgets />
     </hive-pane>
-    <!-- <hive-pane id="dark">
+     <hive-pane id="dark">
       <div hive-theme="dark" style="background: black; color: white">
         <all-widgets dark />
       </div>
-    </hive-pane> -->
-  </hive-splitter>
-  <!-- <div>
+    </hive-pane> 
+    </hive-splitter> -->
+  <div>
     <filter-new />
-  </div> -->
+  </div>
 </template>
 
 <style lang="scss"></style>

src/examples/stores/cityhaze.ts

@@ -22,7 +22,7 @@ const _useFilterStore = defineStore('filter', () => {
     { name: 'мини-конкурс', value: 'миниконкурс' },
     { name: 'Игра в одиноком октябре', value: 'Игра_в_одиноком_октябре' },
   ]);
-  const categoriesValues: Ref<string[]> = ref([]);
+  const categoriesValues: Ref<string[]> = ref(['стихи', 'мнимая_проза', 'Игра_в_одиноком_октябре', 'ночной_эфир']);
 
   const authorsOptions: Ref<PostAuthor[]> = ref([]);
   const authorsValues: Ref<string[]> = ref([]);