Merge pull request #8343 from surveyjs/support-action-call-in-onitemc…

…lick-for-listmodel

support action call in onItemClick for list model #8129

src/actions/action.ts

@@ -170,7 +170,9 @@ export function createDropdownActionModelAdvanced(actionOptions: IAction, listOp
   const originalSelectionChanged = listOptions.onSelectionChanged;
   listOptions.onSelectionChanged = (item: Action, ...params: any[]) => {
     if (newAction.hasTitle) { newAction.title = item.title; }
-    originalSelectionChanged(item, params);
+    if (originalSelectionChanged) {
+      originalSelectionChanged(item, params);
+    }
   };
   const popupModel: PopupModel = createPopupModelWithListModel(listOptions, popupOptions);
 
@@ -192,7 +194,9 @@ export function createDropdownActionModelAdvanced(actionOptions: IAction, listOp
 export function createPopupModelWithListModel(listOptions: IListModel, popupOptions: IPopupOptionsBase): PopupModel {
   const listModel: ListModel = new ListModel(listOptions as any);
   listModel.onSelectionChanged = (item: Action) => {
-    listOptions.onSelectionChanged(item);
+    if (listOptions.onSelectionChanged) {
+      listOptions.onSelectionChanged(item);
+    }
     popupModel.hide();
   };
 
@@ -428,7 +432,7 @@ export class Action extends BaseAction implements IAction, ILocalizableOwner {
   private createLocTitle(): LocalizableString {
     return this.createLocalizableString("title", this, true);
   }
-  public setItems(items: Array<IAction>, onSelectionChanged: (item: Action, ...params: any[]) => void): void {
+  public setItems(items: Array<IAction>, onSelectionChanged?: (item: Action, ...params: any[]) => void): void {
     this.markerIconName = "icon-next_16x16";
     this.component = "sv-list-item-group";
     this.items = [...items];

src/common-styles/sv-list.scss

@@ -90,7 +90,7 @@
 .sv-list__item--with-icon.sv-list__item--with-icon {
   padding: 0;
 
-  .sv-list__item-body {
+  & > .sv-list__item-body {
     padding-top: calcSize(1.5);
     padding-bottom: calcSize(1.5);
     gap: calcSize(2);
@@ -162,6 +162,10 @@ li:focus .sv-list__item.sv-list__item--selected {
   .sv-list__item-icon use {
     fill: $background;
   }
+
+  .sv-list-item__marker-icon use {
+    fill: $primary-foreground;
+  }
 }
 
 .sv-multi-select-list .sv-list__item.sv-list__item--selected,

src/common-styles/sv-popup.scss

@@ -26,10 +26,14 @@ sv-popup {
   height: 0;
 }
 
-.sv-popup-inner .sv-popup__container {
+.sv-popup-inner > .sv-popup__container {
   margin-top: calcSize(-1);
 }
 
+.sv-list__item--with-icon .sv-popup-inner > .sv-popup__container {
+  margin-top: calcSize(-0.5);
+}
+
 .sv-popup__container {
   background-color: $background-dim;
   box-shadow: $shadow-large;

src/list.ts

@@ -32,7 +32,7 @@ export let defaultListCss = {
 };
 export interface IListModel {
   items: Array<IAction>;
-  onSelectionChanged: (item: IAction, ...params: any[]) => void;
+  onSelectionChanged?: (item: IAction, ...params: any[]) => void;
   allowSelection?: boolean;
   searchEnabled?: boolean;
   selectedItem?: IAction;
@@ -90,10 +90,16 @@ export class ListModel<T extends BaseAction = Action> extends ActionContainer<T>
     let actions = super.getRenderedActions();
 
     if (this.filterString) {
-      let newActions = [] as Array<T>;
+      let newActions: Array<T> = [];
       actions.forEach(action => {
         newActions.push(action);
-        if (action.items) action.items.forEach(item => newActions.push(item as T));
+        if (action.items) {
+          action.items.forEach(item => {
+            const a = new Action(item);
+            if (!a.iconName) { a.iconName = action.iconName; }
+            newActions.push(a as IAction as T);
+          });
+        }
       });
       return newActions;
     }
@@ -186,6 +192,10 @@ export class ListModel<T extends BaseAction = Action> extends ActionContainer<T>
     if (this.allowSelection) {
       this.selectedItem = itemValue;
     }
+    const action = (itemValue as IAction).action;
+    if (!!action) {
+      action(itemValue);
+    }
     if (!!this.onSelectionChanged) {
       this.onSelectionChanged(itemValue);
     }

tests/listModelTests.ts

@@ -440,3 +440,30 @@ QUnit.test("ListModel search in subitems", function (assert) {
 
   ListModel.MINELEMENTCOUNT = oldValueMINELEMENTCOUNT;
 });
+QUnit.test("ListModel onItemClick", function (assert) {
+
+  let items: Array<Action> = [];
+  for (let index = 0; index < 4; ++index) {
+    items.push(new Action({ id: "test" + index, title: "test" + index }));
+  }
+  let actionCalled = 0;
+  let selectCalled = 0;
+  items[1].action = () => {
+    actionCalled++;
+  };
+  const list = new ListModel({
+    items: items,
+    onSelectionChanged: () => {
+      selectCalled++;
+    },
+    allowSelection: true
+  } as any);
+
+  list.onItemClick(items[0]);
+  assert.equal(actionCalled, 0);
+  assert.equal(selectCalled, 1);
+
+  list.onItemClick(items[1]);
+  assert.equal(actionCalled, 1);
+  assert.equal(selectCalled, 2);
+});