fix(datagrid): single action overflow close behavior

This change adds details around adding the clrPopoverCloseButton to items projected into the action overflow menu that also need to be able to close the menu. It also explains that the default behavior is to ignore clicks on projected content. closes #3796 Signed-off-by: Matt Hippely <[email protected]> fix(datagrid): close action overflow content on click When new popover utility was added to the action overflow the close behavior changed. Previously this menu closed after user clicked on an item in the popover but after the new utility the content stayed open. This change adds a click listener that calls the toggle servcice and toggles it wth the click event. closes #3796 Signed-off-by: Matt Hippely <[email protected]>
vmware-archive · Jan 22, 2020 · a8517f0 · a8517f0
1 parent 0a66ae7
commit a8517f0
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 11 deletions.
diff --git a/golden/clr-angular.d.ts b/golden/clr-angular.d.ts
@@ -309,6 +309,7 @@ export declare class ClrDatagridActionOverflow implements OnDestroy {
     popoverId: string;
     smartPosition: ClrPopoverPosition;
     constructor(rowActionService: RowActionService, commonStrings: ClrCommonStringsService, platformId: Object, zone: NgZone, smartToggleService: ClrPopoverToggleService, popoverId: string);
+    closeOverflowContent(event: any): void;
     ngOnDestroy(): void;
 }
 

diff --git a/src/clr-angular/data/datagrid/datagrid-action-overflow.spec.ts b/src/clr-angular/data/datagrid/datagrid-action-overflow.spec.ts
@@ -71,16 +71,6 @@ export default function(): void {
       expect(context.clarityDirective.open).toBe(false);
     });
 
-    it("doesn't close the menu when an action menu item container is clicked", function() {
-      toggle.click();
-      context.detectChanges();
-
-      const actionOverflowMenu: HTMLElement = document.querySelector('.clr-popover-content');
-      actionOverflowMenu.click();
-      context.detectChanges();
-      expect(context.clarityDirective.open).toBe(true);
-    });
-
     it('projects menu content when open', function() {
       toggle.click();
       context.detectChanges();

diff --git a/src/clr-angular/data/datagrid/datagrid-action-overflow.ts b/src/clr-angular/data/datagrid/datagrid-action-overflow.ts
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2016-2019 VMware, Inc. All Rights Reserved.
+ * Copyright (c) 2016-2020 VMware, Inc. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
@@ -43,6 +43,7 @@ let clrDgActionId = 0;
            [attr.aria-hidden]="!open"
            [attr.id]="popoverId"
            clrFocusTrap
+           (click)="closeOverflowContent($event)"
            *clrPopoverContent="open at smartPosition; outsideClickToClose: true; scrollToClose: true">
           <ng-content></ng-content>
       </div>
@@ -82,6 +83,10 @@ export class ClrDatagridActionOverflow implements OnDestroy {
     this.subscriptions.forEach(sub => sub.unsubscribe());
   }
 
+  closeOverflowContent(event): void {
+    this.smartToggleService.toggleWithEvent(event);
+  }
+
   private _open: boolean = false;
   public get open() {
     return this._open;