diff --git a/package.json b/package.json index d3d2f31..aeb1e82 100644 --- a/package.json +++ b/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": [ diff --git a/src/common/hooks/use-list-methods.ts b/src/common/hooks/use-list-methods.ts index 089d834..aaf2b4b 100644 --- a/src/common/hooks/use-list-methods.ts +++ b/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 { diff --git a/src/components/hive-multiselect/hive-multiselect.vue b/src/components/hive-multiselect/hive-multiselect.vue index a2df11a..6021c7f 100644 --- a/src/components/hive-multiselect/hive-multiselect.vue +++ b/src/components/hive-multiselect/hive-multiselect.vue @@ -100,6 +100,7 @@ const changeValue = (value: Value) => { } searchQuery.value = ''; onUpdateModelValue(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 }} diff --git a/src/examples/App.vue b/src/examples/App.vue index e4e9747..f5cdda1 100644 --- a/src/examples/App.vue +++ b/src/examples/App.vue @@ -8,19 +8,19 @@ const a = 1; diff --git a/src/examples/stores/cityhaze.ts b/src/examples/stores/cityhaze.ts index 684be7d..e77fe01 100644 --- a/src/examples/stores/cityhaze.ts +++ b/src/examples/stores/cityhaze.ts @@ -22,7 +22,7 @@ const _useFilterStore = defineStore('filter', () => { { name: 'мини-конкурс', value: 'миниконкурс' }, { name: 'Игра в одиноком октябре', value: 'Игра_в_одиноком_октябре' }, ]); - const categoriesValues: Ref = ref([]); + const categoriesValues: Ref = ref(['стихи', 'мнимая_проза', 'Игра_в_одиноком_октябре', 'ночной_эфир']); const authorsOptions: Ref = ref([]); const authorsValues: Ref = ref([]);