fix(table): prevent clicks on interactive elements to select row (#443)

allianz · Dec 21, 2021 · 09b3d6a · 09b3d6a
1 parent 1c52a95
commit 09b3d6a
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 10 deletions.
diff --git a/projects/ng-aquila/src/dropdown/dropdown.ts b/projects/ng-aquila/src/dropdown/dropdown.ts
@@ -91,7 +91,7 @@ export class NxDropdownSelectChange<T = any> {
         '(keydown)': '_handleKeydown($event)',
         '(focus)': '_onFocus()',
         '(blur)': '_onBlur()',
-        '(click)': 'openPanel()',
+        '(click)': 'openPanel($event)',
     },
 })
 export class NxDropdownComponent implements NxDropdownControl, ControlValueAccessor, OnInit, AfterViewInit, AfterContentInit, OnDestroy, DoCheck {
@@ -693,11 +693,12 @@ export class NxDropdownComponent implements NxDropdownControl, ControlValueAcces
     }
 
     /** Opens the panel of the dropdown. */
-    openPanel() {
+    openPanel($event: Event) {
         if (this.disabled || !((this.dropdownItems && this.dropdownItems.length) || (this.options && this.options.length)) || this._panelOpen) {
             return;
         }
 
+        $event.preventDefault();
         this._panelOpen = true;
 
         setTimeout(() => {
@@ -901,7 +902,7 @@ export class NxDropdownComponent implements NxDropdownControl, ControlValueAcces
         // Open the select on ALT + arrow key to match the native <select>
         if (isOpenKey || ((this.isMultiSelect || event.altKey) && isArrowKey)) {
             event.preventDefault(); // prevents the page from scrolling down when pressing space
-            this.openPanel();
+            this.openPanel(event);
         } else if (!this.isMultiSelect) {
             switch (keyCode) {
                 case DOWN_ARROW:

diff --git a/projects/ng-aquila/src/dropdown/multi-select/multi-select.component.ts b/projects/ng-aquila/src/dropdown/multi-select/multi-select.component.ts
@@ -199,7 +199,7 @@ export class NxMultiSelectComponent<S, T> implements ControlValueAccessor, NxFor
     /** @docs-private */
     errorState: boolean = false;
 
-    _positions: ConnectionPositionPair[] = [];
+    _positions: ConnectionPositionPair[] = getPositions('auto', 0);
 
     _inputFocused = false;
 

diff --git a/projects/ng-aquila/src/table/table-row.component.spec.ts b/projects/ng-aquila/src/table/table-row.component.spec.ts
@@ -4,6 +4,7 @@ import { NxTableModule } from './table.module';
 import { NxTableRowComponent } from './table-row.component';
 import { By } from '@angular/platform-browser';
 import { dispatchMouseEvent } from '../cdk-test-utils';
+import { NxDropdownModule } from '@aposin/ng-aquila/dropdown';
 
 @Directive()
 class TableRowTest {
@@ -32,7 +33,7 @@ describe(NxTableRowComponent.name, () => {
         waitForAsync(() => {
             TestBed.configureTestingModule({
                 declarations: [BasicTableRowComponent, SelectableTableRowComponent],
-                imports: [NxTableModule],
+                imports: [NxTableModule, NxDropdownModule],
             }).compileComponents();
         }),
     );
@@ -120,7 +121,7 @@ describe(NxTableRowComponent.name, () => {
             });
         });
 
-        ['a', 'button', 'input', 'label', 'textarea'].forEach(type => {
+        ['a', 'button', 'input', 'label', 'textarea', 'nx-dropdown', 'nx-multi-select .value'].forEach(type => {
             describe(`when clicking a "${type}" in the row`, () => {
                 beforeEach(() => {
                     tableRowElement.nativeElement.querySelector(type).click();
@@ -216,6 +217,14 @@ class BasicTableRowComponent extends TableRowTest {}
                 <input id="input" type="text" />
                 <label for="input">example label</label>
             </td>
+            <td>
+                <nx-dropdown>
+                    <nx-dropdown-item>1</nx-dropdown-item>
+                </nx-dropdown>
+            </td>
+            <td>
+                <nx-multi-select [options]="[1, 2, 3]"></nx-multi-select>
+            </td>
             <td>
                 <button>example button</button>
             </td>

diff --git a/projects/ng-aquila/src/table/table-row.component.ts b/projects/ng-aquila/src/table/table-row.component.ts
@@ -48,7 +48,7 @@ export class NxTableRowComponent {
     constructor(protected _changeDetectorRef: ChangeDetectorRef, private _elementRef: ElementRef) {}
 
     _onSelect($event: KeyboardEvent) {
-        if (!this._selectable || this.isActionEvent($event)) {
+        if (!this._selectable || this.isSelectionPrevented($event)) {
             return;
         }
 
@@ -60,10 +60,14 @@ export class NxTableRowComponent {
     }
 
     /**
-     * Checks if the event would trigger an action.
-     * Return `true` if a button, link, input or label are clicked.
+     * Checks if the event would trigger an action or if default action is prevented.
+     * Returns `true` if a button, link, input or label are clicked.
      */
-    private isActionEvent($event: Event) {
+    private isSelectionPrevented($event: Event) {
+        if ($event.defaultPrevented) {
+            return true;
+        }
+
         let parent: HTMLElement = $event.target as HTMLElement;
 
         while (parent && parent !== this._elementRef.nativeElement) {