fixed item group event bindings #5980

surveyjs · Oct 27, 2024 · c3de526 · c3de526
1 parent f146060
commit c3de526
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 3 deletions.
diff --git a/packages/survey-creator-angular/src/toolbox/toolbox-item-group.component.html b/packages/survey-creator-angular/src/toolbox/toolbox-item-group.component.html
@@ -1,6 +1,7 @@
 <ng-template #template>
   <svc-toolbox-item [model]="item" [viewModel]="viewModel" [creator]="creator" [isCompact]="isCompact"></svc-toolbox-item>
-  <div class="svc-toolbox__item-submenu-button" (mouseover)="viewModel.onMouseOver(item, $event)">
+  <div class="svc-toolbox__item-submenu-button" (mouseover)="viewModel.onMouseOver(item, $event)"
+    (mouseleave)="viewModel.onMouseLeave(item, $event)">
     <svg [iconName]="item.subitemsButtonIcon" [size]="16" sv-ng-svg-icon></svg>
     <sv-ng-popup [popupModel]="model.popupModel" [getArea]="model.getArea"></sv-ng-popup>
   </div>

diff --git a/packages/survey-creator-knockout/src/toolbox/toolbox-item-group.html b/packages/survey-creator-knockout/src/toolbox/toolbox-item-group.html
@@ -1,7 +1,7 @@
 <!-- ko component: { name: 'svc-toolbox-item', params: { model: $data.model, item: $data.item, creator: $data.creator, isCompact: $data.isCompact } } -->
 <!-- /ko -->
 <div class="svc-toolbox__item-submenu-button"
-  data-bind="event: { mouseover: onMouseOver }">
+  data-bind="event: { mouseover: onMouseOver, mouseleave: onMouseLeave }">
   <!-- ko component: { name: 'sv-svg-icon', params: { iconName: item.subitemsButtonIcon, size: 16 } } --><!-- /ko -->
   <sv-popup params="{ model: $data.item.popupModel, getArea: $data.item.getArea }"></sv-popup>
 </div>
diff --git a/packages/survey-creator-vue/src/toolbox/ToolboxItemGroup.vue b/packages/survey-creator-vue/src/toolbox/ToolboxItemGroup.vue
@@ -6,7 +6,7 @@
     :creator="creator"
     :isCompact="isCompact"
   ></SvComponent>
-  <div class="svc-toolbox__item-submenu-button" @mouseover="hover">
+  <div class="svc-toolbox__item-submenu-button" @mouseover="hover" @mouseleave="leave">
     <SvComponent :is="'sv-svg-icon'" :iconName="item.subitemsButtonIcon" :size="item.iconSize"></SvComponent>
     <SvComponent
       :is="'sv-popup'"
@@ -32,4 +32,7 @@ const props = defineProps<{
 const hover = (event: MouseEvent) => {
   props.viewModel.onMouseOver(props.item as QuestionToolboxItem, event);
 };
+const leave = (event: MouseEvent) => {
+  props.viewModel.onMouseLeave(props.item as QuestionToolboxItem, event);
+};
 </script>