feat(core/select): show info if no matches found and fix selection bug

packages/angular/src/components.ts

@@ -1348,14 +1348,14 @@ export declare interface IxPill extends Components.IxPill {}
 
 
 @ProxyCmp({
-  inputs: ['allowClear', 'disabled', 'editable', 'hideListHeader', 'i18nPlaceholder', 'i18nPlaceholderEditable', 'i18nSelectListHeader', 'mode', 'readonly', 'selectedIndices']
+  inputs: ['allowClear', 'disabled', 'editable', 'hideListHeader', 'i18nNoMatches', 'i18nPlaceholder', 'i18nPlaceholderEditable', 'i18nSelectListHeader', 'mode', 'readonly', 'selectedIndices']
 })
 @Component({
   selector: 'ix-select',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['allowClear', 'disabled', 'editable', 'hideListHeader', 'i18nPlaceholder', 'i18nPlaceholderEditable', 'i18nSelectListHeader', 'mode', 'readonly', 'selectedIndices'],
+  inputs: ['allowClear', 'disabled', 'editable', 'hideListHeader', 'i18nNoMatches', 'i18nPlaceholder', 'i18nPlaceholderEditable', 'i18nSelectListHeader', 'mode', 'readonly', 'selectedIndices'],
 })
 export class IxSelect {
   protected el: HTMLElement;

packages/core/component-doc.json

@@ -7059,6 +7059,23 @@
           "optional": false,
           "required": false
         },
+        {
+          "name": "i18nNoMatches",
+          "type": "string",
+          "mutable": false,
+          "attr": "i-1-8n-no-matches",
+          "reflectToAttr": false,
+          "docs": "Hint inside of dropdown if no items where found with current filter text",
+          "docsTags": [],
+          "default": "'No matches'",
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
         {
           "name": "i18nPlaceholder",
           "type": "string",
@@ -7155,7 +7172,7 @@
           "mutable": true,
           "attr": "selected-indices",
           "reflectToAttr": false,
-          "docs": "Indices of selected items",
+          "docs": "Indices of selected items\nThis corresponds to the value property of ix-select-items and therefor not neccessarily the indices of the items in the list.",
           "docsTags": [],
           "default": "[]",
           "values": [

packages/core/src/components.d.ts

@@ -1222,6 +1222,10 @@ export namespace Components {
           * @
          */
         "hideListHeader": boolean;
+        /**
+          * Hint inside of dropdown if no items where found with current filter text
+         */
+        "i18nNoMatches": string;
         /**
           * Input field placeholder
          */
@@ -1243,7 +1247,7 @@ export namespace Components {
          */
         "readonly": boolean;
         /**
-          * Indices of selected items
+          * Indices of selected items This corresponds to the value property of ix-select-items and therefor not neccessarily the indices of the items in the list.
          */
         "selectedIndices": string | string[];
     }
@@ -3661,6 +3665,10 @@ declare namespace LocalJSX {
           * @
          */
         "hideListHeader"?: boolean;
+        /**
+          * Hint inside of dropdown if no items where found with current filter text
+         */
+        "i18nNoMatches"?: string;
         /**
           * Input field placeholder
          */
@@ -3690,7 +3698,7 @@ declare namespace LocalJSX {
          */
         "readonly"?: boolean;
         /**
-          * Indices of selected items
+          * Indices of selected items This corresponds to the value property of ix-select-items and therefor not neccessarily the indices of the items in the list.
          */
         "selectedIndices"?: string | string[];
     }

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

@@ -13,7 +13,6 @@
 
 :host {
   display: block;
-  min-width: 10rem;
 
   &.icon-only {
     min-width: 0;

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

@@ -82,6 +82,7 @@ export class DropdownItem {
             disabled: this.disabled,
           }}
           onClick={() => this.emitItemClick()}
+          tabindex={0}
         >
           {this.checked ? (
             <ix-icon class="checkmark" name="single-check" size="16"></ix-icon>

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

@@ -357,7 +357,10 @@ export class Dropdown {
     }
 
     if (this.placement.includes('auto') || isSubmenu) {
-      positionConfig.middleware.push(flip());
+      positionConfig.middleware.push(
+        flip({ fallbackStrategy: 'initialPlacement' })
+      );
+      positionConfig.placement = 'bottom-start';
     } else {
       positionConfig.placement = this.placement as
         | BasePlacement

packages/core/src/components/pagination/pagination.tsx

@@ -229,6 +229,7 @@ export class Pagination {
           <span class="item-count">
             {this.i18nItems}
             <ix-select
+              hideListHeader
               i18nPlaceholder=""
               i18nSelectListHeader=""
               selected-indices={this.itemCount}

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

@@ -9,10 +9,4 @@
 
 :host {
   display: block;
-
-  ix-dropdown-item {
-    button {
-      margin-left: 1rem;
-    }
-  }
 }

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

@@ -86,7 +86,6 @@ export class SelectItem {
       <Host>
         <ix-dropdown-item
           checked={this.selected}
-          hover={this.hover}
           label={this.label ? this.label : this.value}
           onItemClick={(e) => this.onItemClick(e)}
         ></ix-dropdown-item>

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

@@ -31,6 +31,7 @@ export class Select {
 
   /**
    * Indices of selected items
+   * This corresponds to the value property of ix-select-items and therefor not neccessarily the indices of the items in the list.
    */
   @Prop({ mutable: true }) selectedIndices: string | string[] = [];
 
@@ -74,6 +75,11 @@ export class Select {
    */
   @Prop() i18nSelectListHeader = 'Please select an option';
 
+  /**
+   * Hint inside of dropdown if no items where found with current filter text
+   */
+  @Prop() i18nNoMatches = 'No matches';
+
   /**
    * Hide list header
    *
@@ -128,6 +134,10 @@ export class Select {
     return this.mode === 'multiple';
   }
 
+  get isEveryDropdownItemHidden() {
+    return this.items.every((item) => item.classList.contains('d-none'));
+  }
+
   @Watch('selectedIndices')
   watchSelectedIndices(newId: string | string[]) {
     if (!newId) {
@@ -149,17 +159,6 @@ export class Select {
     this.emitItemClick(newId);
   }
 
-  @Watch('inputFilterText')
-  watchInputText(newValue: string) {
-    if (!this.editable) {
-      return;
-    }
-
-    if (this.itemExists(newValue)) {
-      return;
-    }
-  }
-
   private emitItemClick(newId: string) {
     if (this.isMultipleMode && Array.isArray(this.selectedIndices)) {
       if (this.selectedIndices.includes(newId)) {
@@ -180,11 +179,11 @@ export class Select {
       return;
     }
 
-    const test = document.createElement('ix-select-item');
-    test.value = value;
-    test.label = value;
+    const newItem = document.createElement('ix-select-item');
+    newItem.value = value;
+    newItem.label = value;
 
-    this.addItemRef.appendChild(test);
+    this.addItemRef.appendChild(newItem);
 
     this.clearInput();
     this.emitItemClick(value);
@@ -239,16 +238,17 @@ export class Select {
 
   private dropdownVisibilityChanged(event: CustomEvent<boolean>) {
     this.dropdownShow = event.detail;
+    this.hasFocus = event.detail;
 
     if (event.detail) {
       this.inputRef.focus();
       this.inputRef.select();
 
-      this.navigationItem = this.items[0];
-      this.setHoverEffectForNavigatedSelectItem();
       this.removeHiddenFromItems();
+      this.isDropdownEmpty = this.isEveryDropdownItemHidden;
+    } else {
+      this.navigationItem = undefined;
     }
-    this.hasFocus = event.detail;
   }
 
   @Listen('keydown', {
@@ -294,6 +294,11 @@ export class Select {
     event.stopPropagation();
     event.preventDefault();
 
+    const focusItem = this.items.find(
+      (item) => document.activeElement === item.querySelector('button')
+    );
+    this.navigationItem = focusItem;
+
     const selectItems = this.items.filter(
       (i) => !i.classList.contains('d-none')
     );
@@ -310,13 +315,12 @@ export class Select {
   }
 
   private setHoverEffectForNavigatedSelectItem() {
-    this.items.forEach((item: HTMLIxSelectItemElement) => {
-      item.hover = item === this.navigationItem;
-    });
+    this.navigationItem?.querySelector('button').focus();
   }
 
   private filterItemsWithTypeahead() {
     this.inputFilterText = this.inputRef.value;
+
     if (this.inputFilterText) {
       this.items.forEach((item) => {
         item.classList.remove('d-none');
@@ -329,9 +333,8 @@ export class Select {
     } else {
       this.removeHiddenFromItems();
     }
-    this.isDropdownEmpty = this.items.every((item) =>
-      item.classList.contains('d-none')
-    );
+
+    this.isDropdownEmpty = this.isEveryDropdownItemHidden;
   }
 
   private removeHiddenFromItems() {
@@ -353,6 +356,22 @@ export class Select {
     this.dropdownShow = false;
   }
 
+  private onInputBlur(e) {
+    if (this.editable) {
+      return;
+    }
+
+    if (this.isSingleMode) {
+      if (this.dropdownShow && this.isDropdownEmpty) {
+        this.dropdownShow = false;
+      }
+    }
+
+    if (!this.dropdownShow && this.mode !== 'multiple') {
+      e.target['value'] = this.value;
+    }
+  }
+
   private placeholderValue() {
     if (this.editable) {
       return this.i18nPlaceholderEditable;
@@ -411,6 +430,7 @@ export class Select {
                   placeholder={this.placeholderValue()}
                   value={this.inputValue}
                   ref={(ref) => (this.inputRef = ref)}
+                  onBlur={(e) => this.onInputBlur(e)}
                   onInput={() => this.filterItemsWithTypeahead()}
                 />
                 {this.allowClear &&
@@ -446,25 +466,22 @@ export class Select {
           ref={(ref) => (this.dropdownRef = ref)}
           show={this.dropdownShow}
           class={{
-            'd-none':
-              this.disabled ||
-              this.readonly ||
-              (this.isDropdownEmpty && !this.editable),
+            'd-none': this.disabled || this.readonly,
           }}
           anchor={this.dropdownAnchor}
           trigger={this.dropdownWrapperRef}
           onShowChanged={(e) => this.dropdownVisibilityChanged(e)}
           placement="auto-start"
           overwriteDropdownStyle={async () => {
             return {
-              width: `${this.hostElement.clientWidth}px`,
+              minWidth: `${this.hostElement.clientWidth}px`,
             };
           }}
         >
           <div
             class={{
               'select-list-header': true,
-              hidden: this.hideListHeader === true,
+              hidden: this.hideListHeader || this.isDropdownEmpty,
             }}
             title={this.i18nSelectListHeader}
           >
@@ -490,6 +507,11 @@ export class Select {
               }}
             ></ix-dropdown-item>
           )}
+          {this.isDropdownEmpty && !this.editable ? (
+            <div class="select-list-header">{this.i18nNoMatches}</div>
+          ) : (
+            ''
+          )}
         </ix-dropdown>
       </Host>
     );

packages/core/src/tests/dropdown-button/dropdown-button.e2e.ts

@@ -29,6 +29,8 @@ regressionTest.describe('basic', () => {
 
     await page.waitForSelector('.dropdown.show');
 
-    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
+    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot({
+      maxDiffPixelRatio: 0.01,
+    });
   });
 });

packages/vue/src/components.ts

@@ -489,6 +489,7 @@ export const IxSelect = /*@__PURE__*/ defineContainer<JSX.IxSelect>('ix-select',
   'i18nPlaceholder',
   'i18nPlaceholderEditable',
   'i18nSelectListHeader',
+  'i18nNoMatches',
   'hideListHeader',
   'itemSelectionChange',
   'addItem'