work for #8129 Popup submenu

surveyjs · Apr 23, 2024 · 624bf38 · 624bf38
1 parent 03d9f00
commit 624bf38
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 10 deletions.
diff --git a/src/actions/action.ts b/src/actions/action.ts
@@ -377,12 +377,13 @@ export class Action extends BaseAction implements IAction, ILocalizableOwner {
   private createLocTitle(): LocalizableString {
     return this.createLocalizableString("title", this, true);
   }
-  public setItems(items: Array<IAction>) {
+  public setItems(items: Array<IAction>, onSelectionChanged: (item: Action, ...params: any[]) => void): void {
     this.component = "sv-list-item-group";
     const { innerPopupModel, listModel }: { innerPopupModel: PopupModel<any>, listModel: ListModel<Action> } =
       createPopupModelWithListModel(
-        { items: items, onSelectionChanged: (item: Action, ...params: any[]) => { !!this.action && this.action(); } },
-        { verticalPosition: "bottom", horizontalPosition: "left" });
+        { items: items, onSelectionChanged: onSelectionChanged },
+        { horizontalPosition: "right", showPointer: false }
+      );
     innerPopupModel.cssClass = "sv-popup-inner";
     this.popupModel = innerPopupModel;
   }
@@ -402,11 +403,7 @@ export class Action extends BaseAction implements IAction, ILocalizableOwner {
   @property() private _enabled: boolean;
   @property() action: (context?: any, isUserAction?: boolean) => void;
   @property() _component: string;
-  @property({
-    onSet: (val, target) => {
-      target.setItems(val);
-    }
-  }) items: any;
+  @property() items: any;
   @property({
     onSet: (val, target) => {
       if (target.locTitleValue.text === val) return;

diff --git a/src/common-styles/sv-list.scss b/src/common-styles/sv-list.scss
@@ -134,7 +134,7 @@
 .sv-list__item.sv-list__item--selected.sv-list__item--focused,
 .sv-multi-select-list .sv-list__item.sv-list__item--selected.sv-list__item--focused,
 li:focus .sv-list__item.sv-list__item--selected {
-  .sv-list__item-body {
+  & > .sv-list__item-body {
     background-color: $primary;
     color: $primary-foreground;
     font-weight: 600;

diff --git a/src/knockout/components/list/list-item-group.html b/src/knockout/components/list/list-item-group.html
@@ -1,6 +1,6 @@
 <div data-bind="attr: { disabled: $data.item.enabled !== undefined && !ko.unwrap($data.item.enabled), title: $data.item.tooltip || $data.item.title, 'role': $data.item.ariaRole }">
   <!-- ko if: $data.item.iconName -->
-  <!-- ko component: { name: "sv-svg-icon", params: { iconName: $data.item.iconName, size: $data.item.iconSize, css: $data.item.model.cssClasses.itemIcon } }-->
+  <!-- ko component: { name: "sv-svg-icon", params: { iconName: $data.item.iconName, size: $data.item.iconSize, css: $data.item.cssClasses.itemIcon } }-->
   <!-- /ko -->
   <!-- /ko -->
   <!-- ko template: { name: 'survey-string', data: $data.item.locTitle } --><!-- /ko -->