diff --git a/packages/survey-angular-ui/src/components/list/list-item.component.html b/packages/survey-angular-ui/src/components/list/list-item.component.html
index 2543f38e93..485cb88959 100644
--- a/packages/survey-angular-ui/src/components/list/list-item.component.html
+++ b/packages/survey-angular-ui/src/components/list/list-item.component.html
@@ -4,7 +4,8 @@
+ (mouseover)="listModel.onItemHover(model)"
+ (mouseleave)="listModel.onItemLeave(model)">
diff --git a/packages/survey-vue3-ui/src/components/list/ListItem.vue b/packages/survey-vue3-ui/src/components/list/ListItem.vue
index ed32710780..e2aeab3a41 100644
--- a/packages/survey-vue3-ui/src/components/list/ListItem.vue
+++ b/packages/survey-vue3-ui/src/components/list/ListItem.vue
@@ -21,6 +21,7 @@
v-bind:class="model.cssClasses.itemBody"
:title="item.locTitle.calculatedText"
@mouseover="(e) => model.onItemHover(item)"
+ @mouseover="(e) => model.onItemLeave(item)"
>
+
diff --git a/src/knockout/components/list/list-item.ts b/src/knockout/components/list/list-item.ts
index 4e4c316e9f..d5dd95b5f3 100644
--- a/src/knockout/components/list/list-item.ts
+++ b/src/knockout/components/list/list-item.ts
@@ -21,6 +21,9 @@ ko.components.register("sv-list-item", {
if (event.type === "mouseover") {
data.model.onItemHover(data.item);
}
+ },
+ leave: (event: MouseEvent, data: any) => {
+ data.model.onItemLeave(data.item);
}
};
},
diff --git a/src/list.ts b/src/list.ts
index a6dd946317..8742a7a2a0 100644
--- a/src/list.ts
+++ b/src/list.ts
@@ -16,6 +16,7 @@ export let defaultListCss = {
itemWithIcon: "sv-list__item--with-icon",
itemDisabled: "sv-list__item--disabled",
itemFocused: "sv-list__item--focused",
+ itemHovered: "sv-list__item--hovered",
itemTextWrap: "sv-list__item-text--wrap",
itemIcon: "sv-list__item-icon",
itemMarkerIcon: "sv-list-item__marker-icon",
@@ -199,6 +200,9 @@ export class ListModel
extends ActionContainer
public onItemHover = (itemValue: T): void => {
this.mouseOverHandler(itemValue);
}
+ public onItemLeave(itemValue: T) {
+ itemValue.hidePopupDelayed(this.subItemsHideDelay);
+ }
public isItemDisabled: (itemValue: T) => boolean = (itemValue: T) => {
return itemValue.enabled !== undefined && !itemValue.enabled;
@@ -229,6 +233,7 @@ export class ListModel extends ActionContainer
.append(this.cssClasses.itemDisabled, this.isItemDisabled(itemValue))
.append(this.cssClasses.itemFocused, this.isItemFocused(itemValue))
.append(this.cssClasses.itemSelected, this.isItemSelected(itemValue))
+ .append(this.cssClasses.itemHovered, itemValue.isHovered)
.append(this.cssClasses.itemTextWrap, this.textWrapEnabled)
.append(itemValue.css)
.toString();
diff --git a/src/vue/components/list/list-item.vue b/src/vue/components/list/list-item.vue
index 8ba454de94..25f524d884 100644
--- a/src/vue/components/list/list-item.vue
+++ b/src/vue/components/list/list-item.vue
@@ -7,7 +7,8 @@
model.onItemHover(item)">
+ @mouseover="(e) => model.onItemHover(item)"
+ @mouseleave="(e) => model.onItemLeave(item)">