fix(core,platform): add input to list item to prevent click selection…

…. fix issue with toggling column on p13 dialog (#12878)
SAP · Jan 8, 2025 · b908419 · b908419
1 parent 26fd691
commit b908419
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 9 deletions.
diff --git a/libs/core/list/list-item/list-item.component.ts b/libs/core/list/list-item/list-item.component.ts
@@ -113,6 +113,11 @@ export class ListItemComponent<T = any> extends ListFocusItem<T> implements Afte
     @Input()
     id: Nullable<string> = 'fd-list-item-' + ++listItemUniqueId;
 
+    /** Whether to prevent built-in click event logic on the list item.
+     * Helpful when using lists with checkboxes or radio buttons when the list item should be clickable, but should not select/deselect the list item. */
+    @Input()
+    preventClick = false;
+
     /** @hidden Implementation of KeyboardSupportItemInterface | TODO Revisit KeyboardSupportItemInterface*/
     @Output()
     keyDown: EventEmitter<KeyboardEvent> = new EventEmitter<KeyboardEvent>();
@@ -229,16 +234,18 @@ export class ListItemComponent<T = any> extends ListFocusItem<T> implements Afte
     /** Handler for mouse events */
     @HostListener('click', ['$event'])
     onClick(event: MouseEvent): void {
-        this._clicked$.next(event);
-        if (this.checkbox && !this.link) {
-            if (!this.checkbox.elementRef.nativeElement.contains(event.target as Node)) {
-                // clicking on the checkbox is not suppressed
-                // so we should only process clicks if clicked on the list-item, not checkbox itself
-                this.checkbox.nextValue();
+        if (!this.preventClick) {
+            this._clicked$.next(event);
+            if (this.checkbox && !this.link) {
+                if (!this.checkbox.elementRef.nativeElement.contains(event.target as Node)) {
+                    // clicking on the checkbox is not suppressed
+                    // so we should only process clicks if clicked on the list-item, not checkbox itself
+                    this.checkbox.nextValue();
+                }
+            }
+            if (this.radio && !this.link) {
+                this.radio.labelClicked(event, false);
             }
-        }
-        if (this.radio && !this.link) {
-            this.radio.labelClicked(event, false);
         }
     }
 

diff --git a/libs/platform/table/components/table-p13-dialog/columns/columns.component.html b/libs/platform/table/components/table-p13-dialog/columns/columns.component.html
@@ -59,6 +59,7 @@ <h4 fd-title [headerSize]="4">
             @for (item of _filteredColumns; track _filterByColumnKy($index, item)) {
                 <li
                     fd-list-item
+                    [preventClick]="true"
                     [class.fd-select-item--selected]="item.selected"
                     [selected]="item.selected"
                     [class.fd-select-item--active]="item.active"