fix(core/select): handle overflow of pills (#224)

Co-authored-by: Lukas Maurer <lukas.maurer@siemens.com>
Co-authored-by: Daniel Leroux <daniel.leroux@siemens.com>

packages/core/component-doc.json

@@ -6445,17 +6445,17 @@
       "dependencies": [
         "ix-select-item",
         "ix-filter-chip",
-        "ix-icon",
         "ix-icon-button",
+        "ix-icon",
         "ix-dropdown",
         "ix-dropdown-item"
       ],
       "dependencyGraph": {
         "ix-select": [
           "ix-select-item",
           "ix-filter-chip",
-          "ix-icon",
           "ix-icon-button",
+          "ix-icon",
           "ix-dropdown",
           "ix-dropdown-item"
         ],

packages/core/src/components/select/select.scss

@@ -53,26 +53,20 @@
     display: flex;
     position: relative;
     align-items: flex-start;
-    height: calc(#{$x-large-space} - 2 * var(--theme-input--border-thickness));
     width: 100%;
 
-    &.allow-clear {
-      padding-right: 3.5rem;
-    }
-
     .chips {
       position: relative;
       display: flex;
       align-items: center;
       flex-wrap: wrap;
       height: 100%;
-      max-width: 70%;
-      flex-shrink: 0;
-
-      margin: auto;
+      max-height: 3.5rem;
+      flex-grow: 1;
+      overflow-y: auto;
 
       > ix-filter-chip {
-        margin: 0.1rem;
+        margin: 0 0.1rem;
       }
     }
 
@@ -82,7 +76,6 @@
       background: transparent;
       height: 1.75rem;
       width: 100%;
-      margin-inline-end: $x-large-space;
 
       &,
       &:hover,
@@ -126,11 +119,6 @@
     }
   }
 
-  .clear {
-    position: absolute;
-    right: $x-large-space;
-  }
-
   .add-item {
     display: flex;
     justify-content: flex-start;
@@ -140,6 +128,7 @@
   }
 
   .select-list-header {
+    @include ellipsis;
     display: flex;
     align-items: center;
     height: $default-control-height;

packages/core/src/components/select/select.tsx

@@ -268,6 +268,10 @@ export class Select {
   }
 
   private async onEnterNavigation() {
+    if (this.isMultipleMode) {
+      return;
+    }
+
     if (this.editable && !this.itemExists(this.inputFilterText)) {
       this.emitAddItem(this.inputFilterText);
       this.navigationItem = this.items[this.items.length - 1];
@@ -341,6 +345,7 @@ export class Select {
     this.value = [];
     this.selectedIndices = [];
     this.itemSelectionChange.emit(null);
+    this.dropdownShow = false;
   }
 
   render() {
@@ -361,66 +366,68 @@ export class Select {
           }}
         >
           <div class="input-container">
-            {this.isMultipleMode ? (
-              <div class="chips">
-                {this.selectedItems?.map((item) => (
-                  <ix-filter-chip
-                    disabled={this.disabled || this.readonly}
-                    onCloseClick={(e) => {
+            <div class="chips">
+              {this.isMultipleMode
+                ? this.selectedItems?.map((item) => (
+                    <ix-filter-chip
+                      disabled={this.disabled || this.readonly}
+                      onCloseClick={(e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        this.emitItemClick(item.value);
+                      }}
+                    >
+                      {item.label}
+                    </ix-filter-chip>
+                  ))
+                : ''}
+              <div class="trigger">
+                <input
+                  data-testid="input"
+                  disabled={this.disabled}
+                  readOnly={this.readonly}
+                  type="text"
+                  class={{
+                    'allow-clear': this.allowClear && !!this.value?.length,
+                  }}
+                  placeholder={
+                    this.editable
+                      ? this.i18nPlaceholderEditable
+                      : this.i18nPlaceholder
+                  }
+                  value={this.inputValue}
+                  ref={(ref) => (this.inputRef = ref)}
+                  onInput={() => this.filterItemsWithTypeahead()}
+                />
+                {this.isMultipleMode &&
+                this.allowClear &&
+                (this.value?.length || this.inputFilterText) ? (
+                  <ix-icon-button
+                    class="clear"
+                    icon="clear"
+                    ghost
+                    oval
+                    size="24"
+                    onClick={(e) => {
                       e.preventDefault();
                       e.stopPropagation();
-                      this.emitItemClick(item.value);
+                      this.clear();
+                    }}
+                  />
+                ) : null}
+                {this.disabled || this.readonly ? null : (
+                  <div
+                    class="chevron-down-container"
+                    ref={(ref) => {
+                      if (this.editable) this.dropdownWrapperRef = ref;
                     }}
                   >
-                    {item.label}
-                  </ix-filter-chip>
-                ))}
+                    <ix-icon class="chevron" name="chevron-down-small" />
+                  </div>
+                )}
               </div>
-            ) : null}
-            <div class="trigger">
-              <input
-                data-testid="input"
-                disabled={this.disabled}
-                readOnly={this.readonly}
-                type="text"
-                class={{
-                  'allow-clear': this.allowClear && !!this.value?.length,
-                }}
-                placeholder={
-                  this.editable
-                    ? this.i18nPlaceholderEditable
-                    : this.i18nPlaceholder
-                }
-                value={this.inputValue}
-                ref={(ref) => (this.inputRef = ref)}
-                onInput={() => this.filterItemsWithTypeahead()}
-              />
-              {this.disabled || this.readonly ? null : (
-                <div
-                  class="chevron-down-container"
-                  ref={(ref) => {
-                    if (this.editable) this.dropdownWrapperRef = ref;
-                  }}
-                >
-                  <ix-icon class="chevron" name="chevron-down-small" />
-                </div>
-              )}
             </div>
           </div>
-          {this.allowClear && (this.value?.length || this.inputFilterText) ? (
-            <ix-icon-button
-              class="clear"
-              icon="clear"
-              ghost
-              oval
-              size="24"
-              onClick={(e) => {
-                e.preventDefault();
-                e.stopPropagation();
-                this.clear();
-              }}
-            />
-          ) : null}
         </div>
         <ix-dropdown
           ref={(ref) => (this.dropdownRef = ref)}
@@ -441,7 +448,9 @@ export class Select {
           positioningStrategy={'fixed'}
           adjustDropdownWidthToReferenceWidth={true}
         >
-          <div class="select-list-header">{this.i18nSelectListHeader}</div>
+          <div class="select-list-header" title={this.i18nSelectListHeader}>
+            {this.i18nSelectListHeader}
+          </div>
           <slot></slot>
           <div ref={(ref) => (this.addItemRef = ref)} class="d-contents"></div>
           {this.itemExists(this.inputFilterText) ? (

packages/core/src/components/select/test/__snapshots__/cw-select.spec.tsx.snap

@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ix-select renders 1`] = `
+<ix-select>
+  <!---->
+  <div class="form-control select">
+    <div class="input-container">
+      <div class="chips">
+        <div class="trigger">
+          <input data-testid="input" placeholder="Select an option" type="text">
+          <div class="chevron-down-container">
+            <ix-icon class="chevron" name="chevron-down-small"></ix-icon>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <ix-dropdown adjustdropdownwidthtoreferencewidth="" placement="bottom" positioningstrategy="fixed" style="width: 100%;">
+    <div class="select-list-header" title="Please select an option">
+      Please select an option
+    </div>
+    <div class="d-contents"></div>
+    <ix-dropdown-item class="add-item d-none" data-testid="add-item" icon="plus"></ix-dropdown-item>
+  </ix-dropdown>
+</ix-select>
+`;

packages/core/src/components/select/test/cw-select.spec.tsx

@@ -25,27 +25,7 @@ describe('ix-select', () => {
       components: [Select],
       html: '<ix-select></ix-select>',
     });
-    expect(page.root).toEqualHtml(`
-    <ix-select>
-      <div class=\"form-control select\">
-        <div class=\"input-container\">
-          <div class=\"trigger\">
-            <input data-testid=\"input\" placeholder=\"Select an option\" type=\"text\">
-            <div class=\"chevron-down-container\">
-              <ix-icon class=\"chevron\" name=\"chevron-down-small\"></ix-icon>
-            </div>
-          </div>
-        </div>
-      </div>
-      <ix-dropdown adjustdropdownwidthtoreferencewidth=\"\" placement=\"bottom\" positioningstrategy=\"fixed\" style=\"width: 100%;\">
-        <div class=\"select-list-header\">
-          Please select an option
-        </div>
-        <div class=\"d-contents\"></div>
-        <ix-dropdown-item class=\"add-item d-none\" data-testid=\"add-item\" icon=\"plus\"></ix-dropdown-item>
-      </ix-dropdown>
-    </ix-select>
-    `);
+    expect(page.root).toMatchSnapshot();
   });
 
   it('show add item button in list', async () => {

packages/core/src/components/select/test/mode-multiple-overflow/index.html

@@ -0,0 +1,40 @@
+<!--
+SPDX-FileCopyrightText: 2022 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 padding="2rem" style="width: 256px">
+    <ix-select selected-indices="2" mode="multiple">
+      <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-item label="Item 4" value="4"></ix-select-item>
+      <ix-select-item label="Item 5" value="5"></ix-select-item>
+      <ix-select-item label="Item 6" value="6"></ix-select-item>
+      <ix-select-item label="Item 7" value="7"></ix-select-item>
+      <ix-select-item label="Item 8" value="8"></ix-select-item>
+      <ix-select-item label="Item 9" value="9"></ix-select-item>
+    </ix-select>
+
+    <script>
+      (async () => {
+        await window.customElements.whenDefined('ix-select');
+        await window.customElements.whenDefined('ix-select-item');
+
+        const select = document.querySelector('ix-select');
+        select.selectedIndices = ['1', '2', '3', '4', '5', '6'];
+      })();
+    </script>
+    <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
+  </body>
+</html>

packages/core/src/components/select/test/mode-multiple/index.html

@@ -13,7 +13,7 @@
     />
     <title>Stencil Component Starter</title>
   </head>
-  <bodyp padding="2rem">
+  <body padding="2rem">
     <ix-select selected-indices="2" mode="multiple">
       <ix-select-item label="Item 1" value="1"></ix-select-item>
       <ix-select-item label="Item 2" value="2"></ix-select-item>

packages/core/src/components/select/test/select.e2e.ts

@@ -28,4 +28,26 @@ regressionTest.describe('select', () => {
       maxDiffPixelRatio: 0.05,
     });
   });
+
+  regressionTest('mode-multiple-overflow', async ({ page }) => {
+    await page.goto('select/test/mode-multiple-overflow');
+    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot({
+      maxDiffPixelRatio: 0.05,
+    });
+  });
+
+  regressionTest('mode-multiple-overflow scroll down', async ({ page }) => {
+    await page.goto('select/test/mode-multiple-overflow');
+
+    const inputHandle = await page.waitForSelector('div.chips');
+
+    page.evaluate((menuElement) => {
+      menuElement.scrollTop = 9999;
+      menuElement.classList.add('__SCROLLED__');
+    }, inputHandle);
+
+    await page.waitForSelector('div.chips.__SCROLLED__');
+
+    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
+  });
 });

packages/html-test-app/src/preview-examples/modal.html

@@ -51,7 +51,7 @@
 
         customModal.querySelectorAll('.dismiss-modal').forEach((item) =>
           item.addEventListener('click', () => {
-            dismissModal(customModal, 'canceled!');
+            dismissModal(customModal, 'cancelled!');
           })
         );