fix(core/select): adjust dropdown placement (#398)

siemens · Feb 24, 2023 · 0a8e0a2 · 0a8e0a2
1 parent e906b50
commit 0a8e0a2
Show file tree

Hide file tree

Showing 11 changed files with 99 additions and 13 deletions.
diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
@@ -450,6 +450,10 @@ export namespace Components {
     crossAxis?: number;
     alignmentAxis?: number;
   };
+        "overwriteDropdownStyle": (delegate: {
+    dropdownRef: HTMLElement;
+    triggerRef?: HTMLElement;
+  }) => Promise<Partial<CSSStyleDeclaration>>;
         /**
           * Placement of the dropdown
          */
@@ -2715,6 +2719,10 @@ declare namespace LocalJSX {
           * Fire event after visibility of dropdown has changed
          */
         "onShowChanged"?: (event: IxDropdownCustomEvent<boolean>) => void;
+        "overwriteDropdownStyle"?: (delegate: {
+    dropdownRef: HTMLElement;
+    triggerRef?: HTMLElement;
+  }) => Promise<Partial<CSSStyleDeclaration>>;
         /**
           * Placement of the dropdown
          */

diff --git a/packages/core/src/components/dropdown/dropdown.tsx b/packages/core/src/components/dropdown/dropdown.tsx
@@ -8,10 +8,10 @@
  */
 
 import {
-  autoPlacement,
   autoUpdate,
   computePosition,
   ComputePositionConfig,
+  flip,
   inline,
   offset,
   shift,
@@ -28,7 +28,6 @@ import {
   Prop,
   Watch,
 } from '@stencil/core';
-import { getAlignment } from './alignment';
 import { DropdownTriggerEvent } from './dropdown-trigger-event';
 import { BasePlacement, Placement, PlacementWithAlignment } from './placement';
 
@@ -106,6 +105,14 @@ export class Dropdown {
    */
   @Prop() triggerEvent: DropdownTriggerEvent | DropdownTriggerEvent[] = 'click';
 
+  /**
+   * @internal
+   */
+  @Prop() overwriteDropdownStyle: (delegate: {
+    dropdownRef: HTMLElement;
+    triggerRef?: HTMLElement;
+  }) => Promise<Partial<CSSStyleDeclaration>>;
+
   /**
    * Fire event after visibility of dropdown has changed
    */
@@ -314,11 +321,7 @@ export class Dropdown {
       };
 
       if (this.placement.includes('auto')) {
-        positionConfig.middleware.push(
-          autoPlacement({
-            alignment: getAlignment(this.placement),
-          })
-        );
+        positionConfig.middleware.push(flip());
       } else {
         positionConfig.placement = this.placement as
           | BasePlacement
@@ -355,6 +358,14 @@ export class Dropdown {
               computeResponse.x
             )}px,${Math.round(computeResponse.y)}px)`,
           });
+          if (this.overwriteDropdownStyle) {
+            const overwriteStyle = await this.overwriteDropdownStyle({
+              dropdownRef: this.dropdownRef,
+              triggerRef: this.triggerElement as HTMLElement,
+            });
+
+            Object.assign(this.dropdownRef.style, overwriteStyle);
+          }
         },
         {
           ancestorResize: true,

diff --git a/packages/core/src/components/my-component/my-component.scss b/packages/core/src/components/my-component/my-component.scss
@@ -10,7 +10,7 @@
 @import 'common-variables';
 
 :host {
-  display: flex;
+  display: block;
   position: relative;
   width: 100vw;
   height: 100vh;

diff --git a/packages/core/src/components/select/select.tsx b/packages/core/src/components/select/select.tsx
@@ -429,9 +429,6 @@ export class Select {
         <ix-dropdown
           ref={(ref) => (this.dropdownRef = ref)}
           show={this.dropdownShow}
-          style={{
-            width: '100%',
-          }}
           class={{
             'd-none':
               this.disabled ||
@@ -441,8 +438,12 @@ export class Select {
           anchor={this.dropdownAnchor}
           trigger={this.dropdownWrapperRef}
           onShowChanged={(e) => this.dropdownVisibilityChanged(e)}
-          placement="bottom-start"
-          positioningStrategy={'absolute'}
+          placement="auto-start"
+          overwriteDropdownStyle={async (delegateConfig) => {
+            return {
+              width: `${delegateConfig.triggerRef.clientWidth}px`,
+            };
+          }}
         >
           <div class="select-list-header" title={this.i18nSelectListHeader}>
             {this.i18nSelectListHeader}

diff --git a/packages/core/src/tests/select/autoplacement/index.html b/packages/core/src/tests/select/autoplacement/index.html
@@ -0,0 +1,26 @@
+<!--
+SPDX-FileCopyrightText: 2023 Siemens AG
+
+SPDX-License-Identifier: MIT
+-->
+
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
+    />
+    <title>Stencil Component Starter</title>
+  </head>
+  <body style="padding: 2rem">
+    <div style="position: absolute; bottom: 0px">
+      <ix-select selected-indices="2">
+        <ix-select-item label="Item 1" value="1"></ix-select-item>
+        <ix-select-item label="Item 2" value="2"></ix-select-item>
+        <ix-select-item label="Item 3" value="3"></ix-select-item>
+      </ix-select>
+    </div>
+    <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
+  </body>
+</html>
diff --git a/packages/core/src/tests/select/overflow/index.html b/packages/core/src/tests/select/overflow/index.html
@@ -0,0 +1,26 @@
+<!--
+SPDX-FileCopyrightText: 2023 Siemens AG
+
+SPDX-License-Identifier: MIT
+-->
+
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
+    />
+    <title>Stencil Component Starter</title>
+  </head>
+  <body style="padding: 2rem">
+    <ix-blind>
+      <ix-select selected-indices="2">
+        <ix-select-item label="Item 1" value="1"></ix-select-item>
+        <ix-select-item label="Item 2" value="2"></ix-select-item>
+        <ix-select-item label="Item 3" value="3"></ix-select-item>
+      </ix-select>
+    </ix-blind>
+    <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
+  </body>
+</html>
diff --git a/packages/core/src/tests/select/select.e2e.ts b/packages/core/src/tests/select/select.e2e.ts
@@ -50,4 +50,18 @@ regressionTest.describe('select', () => {
 
     expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
   });
+
+  regressionTest('overflow', async ({ page }) => {
+    await page.goto('select/overflow');
+    await page.locator('.chevron-down-container').click();
+    await page.waitForSelector('.dropdown-menu.show');
+    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
+  });
+
+  regressionTest('autoplacement', async ({ page }) => {
+    await page.goto('select/autoplacement');
+    await page.locator('.chevron-down-container').click();
+    await page.waitForSelector('.dropdown-menu.show');
+    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
+  });
 });
diff --git a/...e2e.ts-snapshots/select-autoplacement-1-chromium---theme-classic-dark-linux.png b/...e2e.ts-snapshots/select-autoplacement-1-chromium---theme-classic-dark-linux.png
diff --git a/...2e.ts-snapshots/select-autoplacement-1-chromium---theme-classic-light-linux.png b/...2e.ts-snapshots/select-autoplacement-1-chromium---theme-classic-light-linux.png
diff --git a/...lect.e2e.ts-snapshots/select-overflow-1-chromium---theme-classic-dark-linux.png b/...lect.e2e.ts-snapshots/select-overflow-1-chromium---theme-classic-dark-linux.png
diff --git a/...ect.e2e.ts-snapshots/select-overflow-1-chromium---theme-classic-light-linux.png b/...ect.e2e.ts-snapshots/select-overflow-1-chromium---theme-classic-light-linux.png