fix(datagrid): fix multiple popover not hiding (#830)

ref: MANAGER-12609

Signed-off-by: Quentin Pavy <[email protected]>

Author: qpavy

packages/components/datagrid/src/js/datagrid.controller.js

@@ -360,8 +360,12 @@ export default class DatagridController {
     return this.refreshDatagridPromise;
   }
 
-  sort(column) {
-    if (!column || !column.sortable) {
+  sort(column, event) {
+    const popoverClassNames = ['oui-popover-button', 'oui-popover__content', 'oui-popover__close-button'];
+    if (
+      !column
+      || !column.sortable
+      || popoverClassNames.some((className) => event.target.classList.contains(className))) {
       return;
     }
 

packages/components/datagrid/src/js/datagrid.html

@@ -28,7 +28,7 @@
                     ng-attr-tabindex="{{column.sortable ? '0' : '-1'}}"
                     ng-class="$ctrl.getSortableClasses(column)"
                     ng-repeat="column in $ctrl.columns track by $index"
-                    ng-click="::$ctrl.sort(column)">
+                    ng-click="::$ctrl.sort(column, $event)">
                     <span ng-bind="column.title"></span>
                     <span class="oui-icon"
                         ng-class="$ctrl.getSortableIcons(column)"
@@ -41,6 +41,7 @@
                         class="oui-popover-button"
                         oui-popover="{{:: column.helper }}"
                         oui-popover-placement="right"
+                        oui-popover-id="{{:: 'popover-' + column.name}}"
                     ></button>
                 </th>
                 <th ng-if="$ctrl.hasActionMenu || $ctrl.customizable"

packages/components/popover/src/js/popover.controller.js

@@ -119,8 +119,8 @@ export default class PopoverController {
 
     // Avoid events if the opening is handled from outside
     if (angular.isUndefined(this.$attrs.ouiPopoverOpen)) {
-      this.$document.on('click', (evt) => this.documentClickHandler(evt));
-      this.$document.on('keydown', (evt) => this.triggerKeyHandler(evt));
+      this.$document.on(`click.${this.id}`, (evt) => this.documentClickHandler(evt));
+      this.$document.on(`keydown.${this.id}`, (evt) => this.triggerKeyHandler(evt));
     }
 
     this.$element.attr('aria-expanded', true);
@@ -133,8 +133,8 @@ export default class PopoverController {
     this.isPopoverOpen = false;
 
     if (angular.isUndefined(this.$attrs.ouiPopoverOpen)) {
-      this.$document.off('click');
-      this.$document.off('keydown');
+      this.$document.off(`click.${this.id}`);
+      this.$document.off(`keydown.${this.id}`);
     }
 
     this.$element.attr('aria-expanded', false);

packages/components/popover/src/less/popover.less

@@ -36,7 +36,7 @@
     min-height: @oui-popover-close-button-icon-size;
     min-width: @oui-popover-close-button-icon-size;
     padding: 0;
-    position: absolute;
+    position: absolute !important;
     right: @oui-popover-close-button-right;
     top: @oui-popover-close-button-top;