fix(core/dropdown): allow nested dropdown (#425)

Co-authored-by: Lukas Maurer <lukas.maurer@siemens.com>

packages/core/component-doc.json

@@ -2703,7 +2703,6 @@
           "reflectToAttr": false,
           "docs": "Set label",
           "docsTags": [],
-          "default": "''",
           "values": [
             {
               "type": "string"
@@ -2735,7 +2734,7 @@
           "mutable": false,
           "attr": "variant",
           "reflectToAttr": false,
-          "docs": "Button varaint",
+          "docs": "Button variant",
           "docsTags": [],
           "default": "'Primary'",
           "values": [

packages/core/scss/components/_dropdown.scss

@@ -62,9 +62,6 @@
 .dropdown-menu {
   position: absolute;
 
-  max-height: 50vh;
-  overflow-y: auto;
-
   background-color: var(--theme-menu--background);
   @include text-default-single;
   border: var(--theme-menu--border-thickness) solid

packages/core/src/components.d.ts

@@ -505,7 +505,7 @@ export namespace Components {
          */
         "outline": boolean;
         /**
-          * Button varaint
+          * Button variant
          */
         "variant": Buttons;
     }
@@ -2770,7 +2770,7 @@ declare namespace LocalJSX {
          */
         "outline"?: boolean;
         /**
-          * Button varaint
+          * Button variant
          */
         "variant"?: Buttons;
     }

packages/core/src/components/divider/divider.scss

@@ -9,10 +9,9 @@
 
 :host {
   display: block;
-  position: initial;
+  position: relative;
 
-  .line {
-    width: auto;
-    border: 0.0625rem solid var(--theme-color-x-weak-bdr);
-  }
-}
+  width: 100%;
+  border: 0.0625rem solid var(--theme-color-x-weak-bdr);
+  margin: 0.25rem 0px;
+}

packages/core/src/components/divider/divider.tsx

@@ -18,10 +18,6 @@ import { Component, h, Host } from '@stencil/core';
 })
 export class Divider {
   render() {
-    return (
-      <Host>
-        <div class="line"></div>
-      </Host>
-    );
+    return <Host></Host>;
   }
 }

packages/core/src/components/dropdown-button/dropdown-button.scss

@@ -18,6 +18,10 @@
     pointer-events: none;
   }
 
+  .hide {
+    display: none;
+  }
+
   .dropdown-button {
     display: block;
     position: relative;

packages/core/src/components/dropdown-button/dropdown-button.tsx

@@ -20,7 +20,7 @@ import { Buttons } from '../button/button-variants';
 })
 export class DropdownButton {
   /**
-   * Button varaint
+   * Button variant
    */
   @Prop() variant: Buttons = 'Primary';
 
@@ -47,7 +47,7 @@ export class DropdownButton {
   /**
    * Set label
    */
-  @Prop() label = '';
+  @Prop() label: string;
 
   /**
    * Button icon
@@ -85,7 +85,7 @@ export class DropdownButton {
             this.dropdownAnchor = ref;
           }}
         >
-          {this.label !== '' ? (
+          {this.label ? (
             <ix-button
               variant={this.variant}
               outline={this.outline}

packages/core/src/components/dropdown-item/dropdown-item.scss

@@ -31,6 +31,11 @@
     }
   }
 
+  :focus {
+    background-color: transparent;
+    color: var(--theme-menu-item--color);
+  }
+
   .checkmark {
     position: absolute;
     left: $small-space;

packages/core/src/components/dropdown/dropdown.scss

@@ -20,3 +20,8 @@
 :host {
   min-width: 0px;
 }
+
+:host(.overflow) {
+  max-height: 50vh;
+  overflow-y: auto;
+}

packages/core/src/components/dropdown/dropdown.tsx

@@ -290,16 +290,37 @@ export class Dropdown {
     }
   }
 
+  private isNestedDropdown(element: Element) {
+    return element.closest('ix-dropdown');
+  }
+
+  private isAnchorSubmenu() {
+    const anchor = this.anchorElement?.closest('ix-dropdown-item');
+    if (!anchor) {
+      return false;
+    }
+
+    return true;
+  }
+
   private toggle(event?: Event) {
     event?.preventDefault();
 
+    if (this.isNestedDropdown(event.target as HTMLElement)) {
+      event?.stopPropagation();
+    }
+
     this.show = !this.show;
     this.showChanged.emit(this.show);
   }
 
   private open(event?: Event) {
     event?.preventDefault();
 
+    if (this.isNestedDropdown(event.target as HTMLElement)) {
+      event?.stopPropagation();
+    }
+
     this.show = true;
     this.showChanged.emit(true);
   }
@@ -314,66 +335,76 @@ export class Dropdown {
   }
 
   private async applyDropdownPosition() {
-    if (this.anchorElement && this.dropdownRef) {
-      let positionConfig: Partial<ComputePositionConfig> = {
-        strategy: this.positioningStrategy,
-        middleware: [],
-      };
-
-      if (this.placement.includes('auto')) {
-        positionConfig.middleware.push(flip());
-      } else {
-        positionConfig.placement = this.placement as
-          | BasePlacement
-          | PlacementWithAlignment;
-      }
+    if (!this.anchorElement) {
+      return;
+    }
+    if (!this.dropdownRef) {
+      return;
+    }
+    const isSubmenu = this.isAnchorSubmenu();
 
-      positionConfig.middleware = [
-        ...positionConfig.middleware,
-        inline(),
-        shift(),
-      ];
+    let positionConfig: Partial<ComputePositionConfig> = {
+      strategy: this.positioningStrategy,
+      middleware: [],
+    };
 
-      if (this.offset) {
-        positionConfig.middleware.push(offset(this.offset));
-      }
+    if (isSubmenu) {
+      positionConfig.placement = 'right-start';
+    }
 
-      if (this.autoUpdateCleanup) {
-        this.autoUpdateCleanup();
-        this.autoUpdateCleanup = null;
-      }
-      this.autoUpdateCleanup = autoUpdate(
-        this.anchorElement,
-        this.dropdownRef,
-        async () => {
-          const computeResponse = await computePosition(
-            this.anchorElement,
-            this.dropdownRef,
-            positionConfig
-          );
-          Object.assign(this.dropdownRef.style, {
-            top: '0',
-            left: '0',
-            transform: `translate(${Math.round(
-              computeResponse.x
-            )}px,${Math.round(computeResponse.y)}px)`,
+    if (this.placement.includes('auto') || isSubmenu) {
+      positionConfig.middleware.push(flip());
+    } else {
+      positionConfig.placement = this.placement as
+        | BasePlacement
+        | PlacementWithAlignment;
+    }
+
+    positionConfig.middleware = [
+      ...positionConfig.middleware,
+      inline(),
+      shift(),
+    ];
+
+    if (this.offset) {
+      positionConfig.middleware.push(offset(this.offset));
+    }
+
+    if (this.autoUpdateCleanup) {
+      this.autoUpdateCleanup();
+      this.autoUpdateCleanup = null;
+    }
+    this.autoUpdateCleanup = autoUpdate(
+      this.anchorElement,
+      this.dropdownRef,
+      async () => {
+        const computeResponse = await computePosition(
+          this.anchorElement,
+          this.dropdownRef,
+          positionConfig
+        );
+        Object.assign(this.dropdownRef.style, {
+          top: '0',
+          left: '0',
+          transform: `translate(${Math.round(computeResponse.x)}px,${Math.round(
+            computeResponse.y
+          )}px)`,
+        });
+        if (this.overwriteDropdownStyle) {
+          const overwriteStyle = await this.overwriteDropdownStyle({
+            dropdownRef: this.dropdownRef,
+            triggerRef: this.triggerElement as HTMLElement,
           });
-          if (this.overwriteDropdownStyle) {
-            const overwriteStyle = await this.overwriteDropdownStyle({
-              dropdownRef: this.dropdownRef,
-              triggerRef: this.triggerElement as HTMLElement,
-            });
-
-            Object.assign(this.dropdownRef.style, overwriteStyle);
-          }
-        },
-        {
-          ancestorResize: true,
-          ancestorScroll: true,
-          elementResize: true,
+
+          Object.assign(this.dropdownRef.style, overwriteStyle);
         }
-      );
-    }
+      },
+      {
+        ancestorResize: true,
+        ancestorScroll: true,
+        elementResize: true,
+      }
+    );
   }
 
   async componentDidLoad() {
@@ -407,6 +438,7 @@ export class Dropdown {
         class={{
           'dropdown-menu': true,
           show: this.show,
+          overflow: true,
         }}
         style={{
           margin: '0',

packages/core/src/components/dropdown/test/__snapshots__/dropdown.spec.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ix-dropdown renders 1`] = `
-<ix-dropdown class="dropdown-menu" style="margin: 0; min-width: 0px; position: fixed;">
+<ix-dropdown class="dropdown-menu overflow" style="margin: 0; min-width: 0px; position: fixed;">
   <mock:shadow-root>
     <div style="display: contents;">
       <slot></slot>

packages/core/src/components/dropdown/test/dropdown.spec.tsx

@@ -55,7 +55,7 @@ describe('ix-dropdown', () => {
     await page.waitForChanges();
 
     expect(page.root).toEqualHtml(`
-    <ix-dropdown class="dropdown-menu show" show="" style="margin: 0; min-width: 0px; position: fixed;">
+    <ix-dropdown class="dropdown-menu overflow show" show="" style="margin: 0; min-width: 0px; position: fixed;">
       <mock:shadow-root>
         <div style="display: contents;">
           <slot></slot>

packages/core/src/components/tree/tree.tsx

@@ -80,6 +80,8 @@ export class Tree {
 
   private observer: MutationObserver;
 
+  private hasFirstRender = false;
+
   private getVirtualizerOptions() {
     const list = this.buildTreeList(this.model[this.root]);
 
@@ -232,6 +234,8 @@ export class Tree {
   }
 
   componentWillRender() {
+    this.hasFirstRender = true;
+
     if (this.isListInitialized()) {
       this.refreshList();
     } else {
@@ -246,7 +250,7 @@ export class Tree {
 
   @Watch('model')
   modelChange() {
-    if (!this.isListInitialized()) {
+    if (this.hasFirstRender && !this.isListInitialized()) {
       this.initList();
     }
   }