fix(flyout): close inactive menu (#798)

* fix: close inactive flyout menu * fix: typo Co-authored-by: Maomao Meyer-Zhang <[email protected]>
telekom · Jan 18, 2022 · 762f892 · 762f892
1 parent e87cc07
commit 762f892
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 8 deletions.
diff --git a/packages/components/src/components/data-grid/data-grid.tsx b/packages/components/src/components/data-grid/data-grid.tsx
@@ -105,7 +105,7 @@ export class DataGrid {
   @Prop() shadeAlternate?: boolean = true;
   /** (optional) Injected css styles */
   @Prop() styles: any;
-  /** (optional) Set to falseto hide table, used for nested tables to re-render upon toggle */
+  /** (optional) Set to false to hide table, used for nested tables to re-render upon toggle */
   @Prop() visible?: boolean = true;
 
   /* 4. Events (alphabetical) */
@@ -720,6 +720,20 @@ export class DataGrid {
     this.elTableHead.style.transform = `translateY(${scrollY}px)`;
   }
 
+  handleMenuListClick = (event) => {
+    const menuItems = ['sortBy', 'toggleVisibility'];
+    const currentMenuItemsIndex = menuItems.indexOf(event.target.id);
+    if (currentMenuItemsIndex > -1) {
+      // check if there is already opened flyout menu list with different id, if opened, close it
+      const inactiveMenuItem = this.hostElement.shadowRoot.querySelector(
+        `#${menuItems[1 - currentMenuItemsIndex]}List`
+      ) as HTMLUListElement;
+      if (inactiveMenuItem) {
+        inactiveMenuItem.setAttribute('opened', 'false');
+      }
+    }
+  };
+
   renderSettingsMenu() {
     return (
       <scale-menu-flyout class={`${name}__settings-menu`}>
@@ -733,10 +747,13 @@ export class DataGrid {
         </scale-button>
         <scale-menu-flyout-list>
           {this.isSortable && (
-            <scale-menu-flyout-item>
+            <scale-menu-flyout-item
+              id="sortBy"
+              onClick={this.handleMenuListClick}
+            >
               <scale-icon-action-sort slot="prefix"></scale-icon-action-sort>
               Sort By
-              <scale-menu-flyout-list slot="sublist">
+              <scale-menu-flyout-list slot="sublist" id="sortByList">
                 {this.fields.map(
                   (
                     { label, type, sortable, sortDirection = 'none' },
@@ -782,10 +799,17 @@ export class DataGrid {
               </scale-menu-flyout-list>
             </scale-menu-flyout-item>
           )}
-          <scale-menu-flyout-item>
+          <scale-menu-flyout-item
+            id="toggleVisibility"
+            onClick={this.handleMenuListClick}
+          >
             <scale-icon-action-hide-password slot="prefix"></scale-icon-action-hide-password>
             Toggle Visibility
-            <scale-menu-flyout-list slot="sublist" close-on-select="false">
+            <scale-menu-flyout-list
+              slot="sublist"
+              close-on-select="false"
+              id="toggleVisibilityList"
+            >
               {this.fields.map(
                 (
                   {

diff --git a/packages/components/src/components/data-grid/readme.md b/packages/components/src/components/data-grid/readme.md
@@ -1,7 +1,5 @@
 # scale-data-grid
 
-
-
 <!-- Auto Generated Below -->
 
 
@@ -24,7 +22,7 @@
 | `selection`      | --                | Read-only selection array - populated with raw data from selected rows                       | `string[]` | `[]`        |
 | `shadeAlternate` | `shade-alternate` | (optional) Shade every second row darker                                                     | `boolean`  | `true`      |
 | `styles`         | `styles`          | (optional) Injected css styles                                                               | `any`      | `undefined` |
-| `visible`        | `visible`         | (optional) Set to falseto hide table, used for nested tables to re-render upon toggle        | `boolean`  | `true`      |
+| `visible`        | `visible`         | (optional) Set to false to hide table, used for nested tables to re-render upon toggle       | `boolean`  | `true`      |
 
 
 ## Events