@siemens/ix 2.0.0-beta.0 → 2.0.0

package/dist/collection/components/select/select.js

@@ -9,7 +9,8 @@
 import { h, Host, } from '@stencil/core';
 export class Select {
   constructor() {
-    this.selectedIndices = [];
+    this.selectedIndices = undefined;
+    this.value = undefined;
     this.allowClear = false;
     this.mode = 'single';
     this.editable = false;
@@ -21,7 +22,7 @@ export class Select {
     this.i18nNoMatches = 'No matches';
     this.hideListHeader = false;
     this.dropdownShow = false;
-    this.value = undefined;
+    this.selectedLabels = undefined;
     this.dropdownWrapperRef = undefined;
     this.dropdownAnchor = undefined;
     this.isDropdownEmpty = false;
@@ -31,13 +32,16 @@ export class Select {
     this.inputValue = undefined;
   }
   get items() {
-    return Array.from(this.hostElement.querySelectorAll('ix-select-item'));
+    return [
+      ...Array.from(this.hostElement.querySelectorAll('ix-select-item')),
+      ...Array.from(this.hostElement.shadowRoot.querySelectorAll('ix-select-item')),
+    ];
   }
   get selectedItems() {
     return this.items.filter((item) => item.selected);
   }
   get addItemButton() {
-    return this.hostElement.querySelector('.add-item');
+    return this.hostElement.shadowRoot.querySelector('.add-item');
   }
   get isSingleMode() {
     return this.mode === 'single';
@@ -48,35 +52,22 @@ export class Select {
   get isEveryDropdownItemHidden() {
     return this.items.every((item) => item.classList.contains('d-none'));
   }
-  watchSelectedIndices(newId) {
-    if (!newId) {
-      this.selectValue([]);
-      return;
-    }
-    if (Array.isArray(newId)) {
-      this.selectValue([...newId]);
-      return;
-    }
-    this.selectValue([newId]);
+  watchSelectedIndices(value) {
+    this.value = value;
+    this.updateSelection();
+  }
+  watchValue(value) {
+    this.selectedIndices = value;
+    this.updateSelection();
   }
   onItemClicked(event) {
     const newId = event.detail;
-    this.emitItemClick(newId);
+    this.itemClick(newId);
   }
-  emitItemClick(newId) {
-    if (this.isMultipleMode && Array.isArray(this.selectedIndices)) {
-      if (this.selectedIndices.includes(newId)) {
-        this.selectedIndices = this.selectedIndices.filter((i) => i !== newId);
-      }
-      else {
-        this.selectedIndices = [...this.selectedIndices, newId];
-      }
-    }
-    else {
-      this.selectedIndices = [newId];
-    }
-    this.selectValue(this.selectedIndices);
-    this.itemSelectionChange.emit(this.selectedIndices);
+  itemClick(newId) {
+    this.value = this.toggleValue(newId);
+    this.updateSelection();
+    this.emitValueChange();
   }
   emitAddItem(value) {
     if (value.trim() === '') {
@@ -87,39 +78,69 @@ export class Select {
     newItem.label = value;
     this.addItemRef.appendChild(newItem);
     this.clearInput();
-    this.emitItemClick(value);
+    this.itemClick(value);
     this.addItem.emit(value);
   }
-  selectValue(ids) {
+  toggleValue(itemValue) {
+    if (!this.isMultipleMode) {
+      return itemValue;
+    }
+    if (!this.value) {
+      return [itemValue];
+    }
+    let value = this.value;
+    if (!Array.isArray(value)) {
+      value = [value];
+    }
+    if (value.includes(itemValue)) {
+      return value.filter((value) => value !== itemValue);
+    }
+    else {
+      return [...value, itemValue];
+    }
+  }
+  updateSelection() {
     var _a;
+    let ids = [];
+    if (this.value) {
+      ids = Array.isArray(this.value) ? [...this.value] : [this.value];
+    }
     this.items.forEach((item) => {
       item.selected = ids.some((i) => i === item.value);
     });
-    this.value = this.selectedItems.map((item) => item.label);
+    this.selectedLabels = this.selectedItems.map((item) => item.label);
     if (this.isSingleMode) {
-      this.inputValue = ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) ? this.value[0] : null;
+      this.inputValue = ((_a = this.selectedLabels) === null || _a === void 0 ? void 0 : _a.length)
+        ? this.selectedLabels[0]
+        : null;
       return;
     }
     this.inputValue = null;
   }
+  emitValueChange() {
+    this.valueChange.emit(this.value);
+    if (!this.value) {
+      this.itemSelectionChange.emit(null);
+    }
+    else {
+      this.itemSelectionChange.emit(Array.isArray(this.value) ? this.value : [this.value]);
+    }
+  }
   componentDidLoad() {
     this.inputRef.addEventListener('input', () => {
       this.inputChange.emit(this.inputRef.value);
     });
   }
   componentWillLoad() {
-    if (this.selectedIndices) {
-      this.selectValue(Array.isArray(this.selectedIndices)
-        ? this.selectedIndices
-        : [this.selectedIndices]);
+    if (this.selectedIndices && !this.value) {
+      this.value = this.selectedIndices;
     }
+    this.updateSelection();
   }
   onLabelChange(event) {
     event.preventDefault();
     event.stopImmediatePropagation();
-    this.selectValue(Array.isArray(this.selectedIndices)
-      ? this.selectedIndices
-      : [this.selectedIndices]);
+    this.updateSelection();
   }
   disconnectedCallback() {
     if (this.labelMutationObserver) {
@@ -143,12 +164,12 @@ export class Select {
     }
   }
   async onKeyDown(event) {
+    if (event.code === 'ArrowDown' || event.code === 'ArrowUp') {
+      this.onArrowNavigation(event, event.code);
+    }
     if (!this.dropdownShow) {
       return;
     }
-    if (event.code === 'ArrowDown' || event.code === 'ArrowUp') {
-      this.onArrowNavigation(event);
-    }
     if (event.code === 'Enter' || event.code === 'NumpadEnter') {
       await this.onEnterNavigation();
     }
@@ -171,24 +192,36 @@ export class Select {
       this.dropdownShow = false;
     }
   }
-  onArrowNavigation(event) {
-    event.stopPropagation();
+  onArrowNavigation(event, key) {
     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'));
-    const index = selectItems.indexOf(this.navigationItem);
-    if (event.code === 'ArrowDown' && index < selectItems.length - 1) {
-      this.navigationItem = selectItems[index + 1];
+    event.stopPropagation();
+    this.dropdownShow = true;
+    const items = this.items.filter((i) => !i.classList.contains('d-none'));
+    if (this.navigationItem === undefined) {
+      this.applyFocusTo(items[0]);
+      return;
+    }
+    let indexOfNavigationItem = items.findIndex((item) => item === this.navigationItem);
+    if (key === 'ArrowDown') {
+      indexOfNavigationItem++;
     }
-    else if (event.code === 'ArrowUp' && index > 0) {
-      this.navigationItem = selectItems[index - 1];
+    else {
+      indexOfNavigationItem--;
     }
-    this.setHoverEffectForNavigatedSelectItem();
+    const newFocusItem = items[indexOfNavigationItem];
+    this.applyFocusTo(newFocusItem);
   }
-  setHoverEffectForNavigatedSelectItem() {
-    var _a;
-    (_a = this.navigationItem) === null || _a === void 0 ? void 0 : _a.querySelector('button').focus();
+  applyFocusTo(element) {
+    if (!element) {
+      return;
+    }
+    this.navigationItem = element;
+    setTimeout(() => {
+      element.shadowRoot
+        .querySelector('ix-dropdown-item')
+        .shadowRoot.querySelector('button')
+        .focus();
+    });
   }
   filterItemsWithTypeahead() {
     this.inputFilterText = this.inputRef.value;
@@ -216,9 +249,9 @@ export class Select {
   }
   clear() {
     this.clearInput();
+    this.selectedLabels = [];
     this.value = [];
-    this.selectedIndices = [];
-    this.itemSelectionChange.emit(null);
+    this.valueChange.emit(null);
     this.dropdownShow = false;
   }
   onInputBlur(e) {
@@ -231,7 +264,7 @@ export class Select {
       }
     }
     if (!this.dropdownShow && this.mode !== 'multiple') {
-      e.target['value'] = this.value;
+      e.target['value'] = this.selectedLabels;
     }
   }
   placeholderValue() {
@@ -251,10 +284,7 @@ export class Select {
   render() {
     var _a, _b, _c;
     return (h(Host, null, h("div", { class: {
-        'form-control': true,
         select: true,
-        focus: this.hasFocus,
-        editable: this.editable,
         disabled: this.disabled,
         readonly: this.readonly,
       }, ref: (ref) => {
@@ -265,19 +295,19 @@ export class Select {
       ? (_a = this.selectedItems) === null || _a === void 0 ? void 0 : _a.map((item) => (h("ix-filter-chip", { disabled: this.disabled || this.readonly, key: item.value, onCloseClick: (e) => {
           e.preventDefault();
           e.stopPropagation();
-          this.emitItemClick(item.value);
+          this.itemClick(item.value);
         } }, item.label)))
       : '', h("div", { class: "trigger" }, h("input", { "data-testid": "input", disabled: this.disabled, readOnly: this.readonly, type: "text", class: {
-        'allow-clear': this.allowClear && !!((_b = this.value) === null || _b === void 0 ? void 0 : _b.length),
+        'allow-clear': this.allowClear && !!((_b = this.selectedLabels) === null || _b === void 0 ? void 0 : _b.length),
       }, placeholder: this.placeholderValue(), value: this.inputValue, ref: (ref) => (this.inputRef = ref), onBlur: (e) => this.onInputBlur(e), onInput: () => this.filterItemsWithTypeahead() }), this.allowClear &&
-      (((_c = this.value) === null || _c === void 0 ? void 0 : _c.length) || this.inputFilterText) ? (h("ix-icon-button", { class: "clear", icon: "clear", ghost: true, oval: true, size: "16", onClick: (e) => {
+      (((_c = this.selectedLabels) === null || _c === void 0 ? void 0 : _c.length) || this.inputFilterText) ? (h("ix-icon-button", { class: "clear", icon: 'clear', ghost: true, oval: true, size: "16", onClick: (e) => {
         e.preventDefault();
         e.stopPropagation();
         this.clear();
-      } })) : null, this.disabled || this.readonly ? null : (h("div", { class: "chevron-down-container", ref: (ref) => {
+      } })) : null, this.disabled || this.readonly ? null : (h("ix-icon-button", { "data-select-dropdown": true, class: { 'dropdown-visible': this.dropdownShow }, icon: "chevron-down-small", ghost: true, ref: (ref) => {
         if (this.editable)
           this.dropdownWrapperRef = ref;
-      } }, h("ix-icon", { class: "chevron", name: "chevron-down-small" }))))))), h("ix-dropdown", { ref: (ref) => (this.dropdownRef = ref), show: this.dropdownShow, closeBehavior: this.isMultipleMode ? 'outside' : 'both', class: {
+      } })))))), h("ix-dropdown", { ref: (ref) => (this.dropdownRef = ref), show: this.dropdownShow, closeBehavior: this.isMultipleMode ? 'outside' : 'both', class: {
         'd-none': this.disabled || this.readonly,
       }, anchor: this.dropdownAnchor, trigger: this.dropdownWrapperRef, onShowChanged: (e) => this.dropdownVisibilityChanged(e), placement: "bottom-start", overwriteDropdownStyle: async () => {
         return {
@@ -286,7 +316,7 @@ export class Select {
       } }, h("div", { class: {
         'select-list-header': true,
         hidden: this.hideListHeader || this.isDropdownEmpty,
-      }, title: this.i18nSelectListHeader }, this.i18nSelectListHeader), h("slot", null), h("div", { ref: (ref) => (this.addItemRef = ref), class: "d-contents" }), this.isAddItemVisible() ? (h("ix-dropdown-item", { "data-testid": "add-item", icon: "plus", class: {
+      }, title: this.i18nSelectListHeader }, this.i18nSelectListHeader), h("slot", null), h("div", { ref: (ref) => (this.addItemRef = ref), class: "d-contents" }), this.isAddItemVisible() ? (h("ix-dropdown-item", { "data-testid": "add-item", icon: 'plus', class: {
         'add-item': true,
       }, label: this.inputFilterText, onItemClick: (e) => {
         e.preventDefault();
@@ -295,7 +325,7 @@ export class Select {
       } })) : null, this.isDropdownEmpty && !this.editable ? (h("div", { class: "select-list-header" }, this.i18nNoMatches)) : (''))));
   }
   static get is() { return "ix-select"; }
-  static get encapsulation() { return "scoped"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
       "$": ["select.scss"]
@@ -317,14 +347,36 @@ export class Select {
           "references": {}
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
-          "tags": [],
-          "text": "Indices of selected items\nThis corresponds to the value property of ix-select-items and therefor not necessarily the indices of the items in the list."
+          "tags": [{
+              "name": "deprecated",
+              "text": "since 2.0.0. Use the `value` property instead."
+            }],
+          "text": "Indices of selected items.\nThis corresponds to the value property of ix-select-items and therefor not necessarily the indices of the items in the list."
         },
         "attribute": "selected-indices",
-        "reflect": false,
-        "defaultValue": "[]"
+        "reflect": false
+      },
+      "value": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string | string[]",
+          "resolved": "string | string[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [{
+              "name": "since",
+              "text": "2.0.0"
+            }],
+          "text": "Current selected value.\nThis corresponds to the value property of ix-select-items"
+        },
+        "attribute": "value",
+        "reflect": false
       },
       "allowClear": {
         "type": "boolean",
@@ -520,7 +572,7 @@ export class Select {
   static get states() {
     return {
       "dropdownShow": {},
-      "value": {},
+      "selectedLabels": {},
       "dropdownWrapperRef": {},
       "dropdownAnchor": {},
       "isDropdownEmpty": {},
@@ -532,18 +584,39 @@ export class Select {
   }
   static get events() {
     return [{
+        "method": "valueChange",
+        "name": "valueChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "since",
+              "text": "2.0.0"
+            }],
+          "text": "Value changed"
+        },
+        "complexType": {
+          "original": "string | string[]",
+          "resolved": "string | string[]",
+          "references": {}
+        }
+      }, {
         "method": "itemSelectionChange",
         "name": "itemSelectionChange",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
         "docs": {
-          "tags": [],
+          "tags": [{
+              "name": "deprecated",
+              "text": "since 2.0.0. Use `valueChange` instead."
+            }],
           "text": "Item selection changed"
         },
         "complexType": {
-          "original": "string | string[]",
-          "resolved": "string | string[]",
+          "original": "string[]",
+          "resolved": "string[]",
           "references": {}
         }
       }, {
@@ -586,6 +659,9 @@ export class Select {
     return [{
         "propName": "selectedIndices",
         "methodName": "watchSelectedIndices"
+      }, {
+        "propName": "value",
+        "methodName": "watchValue"
       }];
   }
   static get listeners() {

package/dist/collection/components/select/select.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.js","sourceRoot":"","sources":["../../../src/components/select/select.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { IxSelectItemLabelChangeEvent } from '../select-item/events';\n\n@Component({\n  tag: 'ix-select',\n  styleUrl: 'select.scss',\n  scoped: true,\n})\nexport class Select {\n  @Element() hostElement!: HTMLIxSelectElement;\n\n  /**\n   * Indices of selected items\n   * This corresponds to the value property of ix-select-items and therefor not necessarily the indices of the items in the list.\n   */\n  @Prop({ mutable: true }) selectedIndices: string | string[] = [];\n\n  /**\n   * Show clear button\n   */\n  @Prop() allowClear = false;\n\n  /**\n   * Selection mode\n   */\n  @Prop() mode: 'single' | 'multiple' = 'single';\n\n  /**\n   * Select is extendable\n   */\n  @Prop() editable = false;\n\n  /**\n   * If true the select will be in disabled state\n   */\n  @Prop() disabled = false;\n\n  /**\n   * If true the select will be in readonly mode\n   */\n  @Prop() readonly = false;\n\n  /**\n   * Input field placeholder\n   */\n  @Prop() i18nPlaceholder = 'Select an option';\n\n  /**\n   * Input field placeholder for editable select\n   */\n  @Prop() i18nPlaceholderEditable = 'Type of select option';\n\n  /**\n   * Select list header\n   */\n  @Prop() i18nSelectListHeader = 'Please select an option';\n\n  /**\n   * Hint inside of dropdown if no items where found with current filter text\n   *\n   * @since 1.5.0\n   */\n  @Prop() i18nNoMatches = 'No matches';\n\n  /**\n   * Hide list header\n   *\n   * @since 1.5.0\n   @\n   */\n  @Prop() hideListHeader = false;\n\n  /**\n   * Item selection changed\n   */\n  @Event() itemSelectionChange: EventEmitter<string | string[]>;\n\n  /**\n   * Event dispatched whenever the text input changes.\n   *\n   * @since 2.0.0\n   */\n  @Event() inputChange: EventEmitter<string>;\n\n  /**\n   * Item added to selection\n   */\n  @Event() addItem: EventEmitter<string>;\n\n  @State() dropdownShow = false;\n  @State() value: string[];\n  @State() dropdownWrapperRef!: HTMLElement;\n  @State() dropdownAnchor!: HTMLElement;\n  @State() isDropdownEmpty = false;\n  @State() hasFocus = false;\n  @State() navigationItem: HTMLIxSelectItemElement;\n  @State() inputFilterText: string;\n  @State() inputValue: string;\n\n  private inputRef!: HTMLInputElement;\n  private dropdownRef!: HTMLIxDropdownElement;\n  private addItemRef!: HTMLDivElement;\n\n  private labelMutationObserver: MutationObserver;\n\n  get items() {\n    return Array.from(this.hostElement.querySelectorAll('ix-select-item'));\n  }\n\n  get selectedItems() {\n    return this.items.filter((item) => item.selected);\n  }\n\n  get addItemButton() {\n    return this.hostElement.querySelector('.add-item');\n  }\n\n  get isSingleMode() {\n    return this.mode === 'single';\n  }\n\n  get isMultipleMode() {\n    return this.mode === 'multiple';\n  }\n\n  get isEveryDropdownItemHidden() {\n    return this.items.every((item) => item.classList.contains('d-none'));\n  }\n\n  @Watch('selectedIndices')\n  watchSelectedIndices(newId: string | string[]) {\n    if (!newId) {\n      this.selectValue([]);\n      return;\n    }\n\n    if (Array.isArray(newId)) {\n      this.selectValue([...newId]);\n      return;\n    }\n\n    this.selectValue([newId]);\n  }\n\n  @Listen('itemClick')\n  onItemClicked(event: CustomEvent<string>) {\n    const newId = event.detail;\n    this.emitItemClick(newId);\n  }\n\n  private emitItemClick(newId: string) {\n    if (this.isMultipleMode && Array.isArray(this.selectedIndices)) {\n      if (this.selectedIndices.includes(newId)) {\n        this.selectedIndices = this.selectedIndices.filter((i) => i !== newId);\n      } else {\n        this.selectedIndices = [...this.selectedIndices, newId];\n      }\n    } else {\n      this.selectedIndices = [newId];\n    }\n\n    this.selectValue(this.selectedIndices);\n    this.itemSelectionChange.emit(this.selectedIndices);\n  }\n\n  private emitAddItem(value: string) {\n    if (value.trim() === '') {\n      return;\n    }\n\n    const newItem = document.createElement('ix-select-item');\n    newItem.value = value;\n    newItem.label = value;\n\n    this.addItemRef.appendChild(newItem);\n\n    this.clearInput();\n    this.emitItemClick(value);\n    this.addItem.emit(value);\n  }\n\n  private selectValue(ids: string[]) {\n    this.items.forEach((item) => {\n      item.selected = ids.some((i) => i === item.value);\n    });\n\n    this.value = this.selectedItems.map((item) => item.label);\n\n    if (this.isSingleMode) {\n      this.inputValue = this.value?.length ? this.value[0] : null;\n      return;\n    }\n\n    this.inputValue = null;\n  }\n\n  componentDidLoad() {\n    this.inputRef.addEventListener('input', () => {\n      this.inputChange.emit(this.inputRef.value);\n    });\n  }\n\n  componentWillLoad() {\n    if (this.selectedIndices) {\n      this.selectValue(\n        Array.isArray(this.selectedIndices)\n          ? this.selectedIndices\n          : [this.selectedIndices]\n      );\n    }\n  }\n\n  @Listen('ix-select-item:labelChange')\n  onLabelChange(event: IxSelectItemLabelChangeEvent) {\n    event.preventDefault();\n    event.stopImmediatePropagation();\n    this.selectValue(\n      Array.isArray(this.selectedIndices)\n        ? this.selectedIndices\n        : [this.selectedIndices]\n    );\n  }\n\n  disconnectedCallback() {\n    if (this.labelMutationObserver) {\n      this.labelMutationObserver.disconnect();\n    }\n  }\n\n  private itemExists(item: string) {\n    return this.items.find((i) => i.label === item);\n  }\n\n  private dropdownVisibilityChanged(event: CustomEvent<boolean>) {\n    this.dropdownShow = event.detail;\n    this.hasFocus = event.detail;\n\n    if (event.detail) {\n      this.inputRef.focus();\n      this.inputRef.select();\n\n      this.removeHiddenFromItems();\n      this.isDropdownEmpty = this.isEveryDropdownItemHidden;\n    } else {\n      this.navigationItem = undefined;\n    }\n  }\n\n  @Listen('keydown', {\n    target: 'window',\n  })\n  async onKeyDown(event: KeyboardEvent) {\n    if (!this.dropdownShow) {\n      return;\n    }\n\n    if (event.code === 'ArrowDown' || event.code === 'ArrowUp') {\n      this.onArrowNavigation(event);\n    }\n\n    if (event.code === 'Enter' || event.code === 'NumpadEnter') {\n      await this.onEnterNavigation();\n    }\n\n    if (event.code === 'Escape') {\n      this.dropdownShow = false;\n    }\n  }\n\n  private async onEnterNavigation() {\n    if (this.isMultipleMode) {\n      return;\n    }\n\n    if (this.editable && !this.itemExists(this.inputFilterText)) {\n      this.emitAddItem(this.inputFilterText);\n      this.navigationItem = this.items[this.items.length - 1];\n    }\n\n    this.navigationItem?.onItemClick();\n    await this.dropdownRef?.updatePosition();\n\n    if (this.isSingleMode && !this.editable) {\n      this.dropdownShow = false;\n    }\n  }\n\n  private onArrowNavigation(event: KeyboardEvent) {\n    event.stopPropagation();\n    event.preventDefault();\n\n    const focusItem = this.items.find(\n      (item) => document.activeElement === item.querySelector('button')\n    );\n    this.navigationItem = focusItem;\n\n    const selectItems = this.items.filter(\n      (i) => !i.classList.contains('d-none')\n    );\n\n    const index = selectItems.indexOf(this.navigationItem);\n\n    if (event.code === 'ArrowDown' && index < selectItems.length - 1) {\n      this.navigationItem = selectItems[index + 1];\n    } else if (event.code === 'ArrowUp' && index > 0) {\n      this.navigationItem = selectItems[index - 1];\n    }\n\n    this.setHoverEffectForNavigatedSelectItem();\n  }\n\n  private setHoverEffectForNavigatedSelectItem() {\n    this.navigationItem?.querySelector('button').focus();\n  }\n\n  private filterItemsWithTypeahead() {\n    this.inputFilterText = this.inputRef.value;\n\n    if (this.inputFilterText) {\n      this.items.forEach((item) => {\n        item.classList.remove('d-none');\n        if (\n          !item.label.toLowerCase().includes(this.inputFilterText.toLowerCase())\n        ) {\n          item.classList.add('d-none');\n        }\n      });\n    } else {\n      this.removeHiddenFromItems();\n    }\n\n    this.isDropdownEmpty = this.isEveryDropdownItemHidden;\n  }\n\n  private removeHiddenFromItems() {\n    this.items.forEach((item) => {\n      item.classList.remove('d-none');\n    });\n  }\n\n  private clearInput() {\n    this.inputRef.value = '';\n    this.inputFilterText = '';\n  }\n\n  private clear() {\n    this.clearInput();\n    this.value = [];\n    this.selectedIndices = [];\n    this.itemSelectionChange.emit(null);\n    this.dropdownShow = false;\n  }\n\n  private onInputBlur(e) {\n    if (this.editable) {\n      return;\n    }\n\n    if (this.isSingleMode) {\n      if (this.dropdownShow && this.isDropdownEmpty) {\n        this.dropdownShow = false;\n      }\n    }\n\n    if (!this.dropdownShow && this.mode !== 'multiple') {\n      e.target['value'] = this.value;\n    }\n  }\n\n  private placeholderValue() {\n    if (this.editable) {\n      return this.i18nPlaceholderEditable;\n    }\n\n    if (this.readonly) {\n      return '';\n    }\n\n    return this.i18nPlaceholder;\n  }\n\n  private isAddItemVisible() {\n    return (\n      !this.itemExists(this.inputFilterText) &&\n      this.editable &&\n      this.inputFilterText\n    );\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            'form-control': true,\n            select: true,\n            focus: this.hasFocus,\n            editable: this.editable,\n            disabled: this.disabled,\n            readonly: this.readonly,\n          }}\n          ref={(ref) => {\n            this.dropdownAnchor = ref;\n            if (!this.editable) this.dropdownWrapperRef = ref;\n          }}\n        >\n          <div class=\"input-container\">\n            <div class=\"chips\">\n              {this.isMultipleMode\n                ? this.selectedItems?.map((item) => (\n                    <ix-filter-chip\n                      disabled={this.disabled || this.readonly}\n                      key={item.value}\n                      onCloseClick={(e) => {\n                        e.preventDefault();\n                        e.stopPropagation();\n                        this.emitItemClick(item.value);\n                      }}\n                    >\n                      {item.label}\n                    </ix-filter-chip>\n                  ))\n                : ''}\n              <div class=\"trigger\">\n                <input\n                  data-testid=\"input\"\n                  disabled={this.disabled}\n                  readOnly={this.readonly}\n                  type=\"text\"\n                  class={{\n                    'allow-clear': this.allowClear && !!this.value?.length,\n                  }}\n                  placeholder={this.placeholderValue()}\n                  value={this.inputValue}\n                  ref={(ref) => (this.inputRef = ref)}\n                  onBlur={(e) => this.onInputBlur(e)}\n                  onInput={() => this.filterItemsWithTypeahead()}\n                />\n                {this.allowClear &&\n                (this.value?.length || this.inputFilterText) ? (\n                  <ix-icon-button\n                    class=\"clear\"\n                    icon=\"clear\"\n                    ghost\n                    oval\n                    size=\"16\"\n                    onClick={(e) => {\n                      e.preventDefault();\n                      e.stopPropagation();\n                      this.clear();\n                    }}\n                  />\n                ) : null}\n                {this.disabled || this.readonly ? null : (\n                  <div\n                    class=\"chevron-down-container\"\n                    ref={(ref) => {\n                      if (this.editable) this.dropdownWrapperRef = ref;\n                    }}\n                  >\n                    <ix-icon class=\"chevron\" name=\"chevron-down-small\" />\n                  </div>\n                )}\n              </div>\n            </div>\n          </div>\n        </div>\n        <ix-dropdown\n          ref={(ref) => (this.dropdownRef = ref)}\n          show={this.dropdownShow}\n          closeBehavior={this.isMultipleMode ? 'outside' : 'both'}\n          class={{\n            'd-none': this.disabled || this.readonly,\n          }}\n          anchor={this.dropdownAnchor}\n          trigger={this.dropdownWrapperRef}\n          onShowChanged={(e) => this.dropdownVisibilityChanged(e)}\n          placement=\"bottom-start\"\n          overwriteDropdownStyle={async () => {\n            return {\n              minWidth: `${this.hostElement.clientWidth}px`,\n            };\n          }}\n        >\n          <div\n            class={{\n              'select-list-header': true,\n              hidden: this.hideListHeader || this.isDropdownEmpty,\n            }}\n            title={this.i18nSelectListHeader}\n          >\n            {this.i18nSelectListHeader}\n          </div>\n          <slot></slot>\n          <div ref={(ref) => (this.addItemRef = ref)} class=\"d-contents\"></div>\n          {this.isAddItemVisible() ? (\n            <ix-dropdown-item\n              data-testid=\"add-item\"\n              icon=\"plus\"\n              class={{\n                'add-item': true,\n              }}\n              label={this.inputFilterText}\n              onItemClick={(e) => {\n                e.preventDefault();\n                e.stopPropagation();\n                this.emitAddItem(this.inputFilterText);\n              }}\n            ></ix-dropdown-item>\n          ) : null}\n          {this.isDropdownEmpty && !this.editable ? (\n            <div class=\"select-list-header\">{this.i18nNoMatches}</div>\n          ) : (\n            ''\n          )}\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"select.js","sourceRoot":"","sources":["../../../src/components/select/select.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { IxSelectItemLabelChangeEvent } from '../select-item/events';\n\n@Component({\n  tag: 'ix-select',\n  styleUrl: 'select.scss',\n  shadow: true,\n})\nexport class Select {\n  @Element() hostElement!: HTMLIxSelectElement;\n\n  /**\n   * Indices of selected items.\n   * This corresponds to the value property of ix-select-items and therefor not necessarily the indices of the items in the list.\n   * @deprecated since 2.0.0. Use the `value` property instead.\n   */\n  @Prop({ mutable: true }) selectedIndices?: string | string[];\n\n  /**\n   * Current selected value.\n   * This corresponds to the value property of ix-select-items\n   * @since 2.0.0\n   */\n  @Prop({ mutable: true }) value?: string | string[];\n\n  /**\n   * Show clear button\n   */\n  @Prop() allowClear = false;\n\n  /**\n   * Selection mode\n   */\n  @Prop() mode: 'single' | 'multiple' = 'single';\n\n  /**\n   * Select is extendable\n   */\n  @Prop() editable = false;\n\n  /**\n   * If true the select will be in disabled state\n   */\n  @Prop() disabled = false;\n\n  /**\n   * If true the select will be in readonly mode\n   */\n  @Prop() readonly = false;\n\n  /**\n   * Input field placeholder\n   */\n  @Prop() i18nPlaceholder = 'Select an option';\n\n  /**\n   * Input field placeholder for editable select\n   */\n  @Prop() i18nPlaceholderEditable = 'Type of select option';\n\n  /**\n   * Select list header\n   */\n  @Prop() i18nSelectListHeader = 'Please select an option';\n\n  /**\n   * Hint inside of dropdown if no items where found with current filter text\n   *\n   * @since 1.5.0\n   */\n  @Prop() i18nNoMatches = 'No matches';\n\n  /**\n   * Hide list header\n   *\n   * @since 1.5.0\n   @\n   */\n  @Prop() hideListHeader = false;\n\n  /**\n   * Value changed\n   * @since 2.0.0\n   */\n  @Event() valueChange: EventEmitter<string | string[]>;\n\n  /**\n   * Item selection changed\n   * @deprecated since 2.0.0. Use `valueChange` instead.\n   */\n  @Event() itemSelectionChange: EventEmitter<string[]>;\n\n  /**\n   * Event dispatched whenever the text input changes.\n   *\n   * @since 2.0.0\n   */\n  @Event() inputChange: EventEmitter<string>;\n\n  /**\n   * Item added to selection\n   */\n  @Event() addItem: EventEmitter<string>;\n\n  @State() dropdownShow = false;\n  @State() selectedLabels: string[];\n  @State() dropdownWrapperRef!: HTMLElement;\n  @State() dropdownAnchor!: HTMLElement;\n  @State() isDropdownEmpty = false;\n  @State() hasFocus = false;\n  @State() navigationItem: HTMLIxSelectItemElement;\n  @State() inputFilterText: string;\n  @State() inputValue: string;\n\n  private inputRef!: HTMLInputElement;\n  private dropdownRef!: HTMLIxDropdownElement;\n  private addItemRef!: HTMLDivElement;\n\n  private labelMutationObserver: MutationObserver;\n\n  get items() {\n    return [\n      ...Array.from(this.hostElement.querySelectorAll('ix-select-item')),\n      ...Array.from(\n        this.hostElement.shadowRoot.querySelectorAll('ix-select-item')\n      ),\n    ];\n  }\n\n  get selectedItems() {\n    return this.items.filter((item) => item.selected);\n  }\n\n  get addItemButton() {\n    return this.hostElement.shadowRoot.querySelector('.add-item');\n  }\n\n  get isSingleMode() {\n    return this.mode === 'single';\n  }\n\n  get isMultipleMode() {\n    return this.mode === 'multiple';\n  }\n\n  get isEveryDropdownItemHidden() {\n    return this.items.every((item) => item.classList.contains('d-none'));\n  }\n\n  @Watch('selectedIndices')\n  watchSelectedIndices(value: string | string[]) {\n    this.value = value;\n    this.updateSelection();\n  }\n\n  @Watch('value')\n  watchValue(value: string | string[]) {\n    this.selectedIndices = value;\n    this.updateSelection();\n  }\n\n  @Listen('itemClick')\n  onItemClicked(event: CustomEvent<string>) {\n    const newId = event.detail;\n    this.itemClick(newId);\n  }\n\n  private itemClick(newId: string) {\n    this.value = this.toggleValue(newId);\n    this.updateSelection();\n    this.emitValueChange();\n  }\n\n  private emitAddItem(value: string) {\n    if (value.trim() === '') {\n      return;\n    }\n\n    const newItem = document.createElement('ix-select-item');\n    newItem.value = value;\n    newItem.label = value;\n\n    this.addItemRef.appendChild(newItem);\n\n    this.clearInput();\n    this.itemClick(value);\n    this.addItem.emit(value);\n  }\n\n  private toggleValue(itemValue: string) {\n    if (!this.isMultipleMode) {\n      return itemValue;\n    }\n\n    if (!this.value) {\n      return [itemValue];\n    }\n\n    let value = this.value;\n\n    if (!Array.isArray(value)) {\n      value = [value];\n    }\n\n    if (value.includes(itemValue)) {\n      return value.filter((value) => value !== itemValue);\n    } else {\n      return [...value, itemValue];\n    }\n  }\n\n  private updateSelection() {\n    let ids = [];\n\n    if (this.value) {\n      ids = Array.isArray(this.value) ? [...this.value] : [this.value];\n    }\n\n    this.items.forEach((item) => {\n      item.selected = ids.some((i) => i === item.value);\n    });\n\n    this.selectedLabels = this.selectedItems.map((item) => item.label);\n\n    if (this.isSingleMode) {\n      this.inputValue = this.selectedLabels?.length\n        ? this.selectedLabels[0]\n        : null;\n      return;\n    }\n\n    this.inputValue = null;\n  }\n\n  private emitValueChange() {\n    this.valueChange.emit(this.value);\n\n    if (!this.value) {\n      this.itemSelectionChange.emit(null);\n    } else {\n      this.itemSelectionChange.emit(\n        Array.isArray(this.value) ? this.value : [this.value]\n      );\n    }\n  }\n\n  componentDidLoad() {\n    this.inputRef.addEventListener('input', () => {\n      this.inputChange.emit(this.inputRef.value);\n    });\n  }\n\n  componentWillLoad() {\n    if (this.selectedIndices && !this.value) {\n      this.value = this.selectedIndices;\n    }\n\n    this.updateSelection();\n  }\n\n  @Listen('ix-select-item:labelChange')\n  onLabelChange(event: IxSelectItemLabelChangeEvent) {\n    event.preventDefault();\n    event.stopImmediatePropagation();\n    this.updateSelection();\n  }\n\n  disconnectedCallback() {\n    if (this.labelMutationObserver) {\n      this.labelMutationObserver.disconnect();\n    }\n  }\n\n  private itemExists(item: string) {\n    return this.items.find((i) => i.label === item);\n  }\n\n  private dropdownVisibilityChanged(event: CustomEvent<boolean>) {\n    this.dropdownShow = event.detail;\n    this.hasFocus = event.detail;\n\n    if (event.detail) {\n      this.inputRef.focus();\n      this.inputRef.select();\n\n      this.removeHiddenFromItems();\n      this.isDropdownEmpty = this.isEveryDropdownItemHidden;\n    } else {\n      this.navigationItem = undefined;\n    }\n  }\n\n  @Listen('keydown', {\n    target: 'window',\n  })\n  async onKeyDown(event: KeyboardEvent) {\n    if (event.code === 'ArrowDown' || event.code === 'ArrowUp') {\n      this.onArrowNavigation(event, event.code);\n    }\n\n    if (!this.dropdownShow) {\n      return;\n    }\n\n    if (event.code === 'Enter' || event.code === 'NumpadEnter') {\n      await this.onEnterNavigation();\n    }\n\n    if (event.code === 'Escape') {\n      this.dropdownShow = false;\n    }\n  }\n\n  private async onEnterNavigation() {\n    if (this.isMultipleMode) {\n      return;\n    }\n\n    if (this.editable && !this.itemExists(this.inputFilterText)) {\n      this.emitAddItem(this.inputFilterText);\n      this.navigationItem = this.items[this.items.length - 1];\n    }\n\n    this.navigationItem?.onItemClick();\n    await this.dropdownRef?.updatePosition();\n\n    if (this.isSingleMode && !this.editable) {\n      this.dropdownShow = false;\n    }\n  }\n\n  private onArrowNavigation(\n    event: KeyboardEvent,\n    key: 'ArrowDown' | 'ArrowUp'\n  ) {\n    event.preventDefault();\n    event.stopPropagation();\n\n    this.dropdownShow = true;\n\n    const items = this.items.filter((i) => !i.classList.contains('d-none'));\n    if (this.navigationItem === undefined) {\n      this.applyFocusTo(items[0]);\n      return;\n    }\n\n    let indexOfNavigationItem = items.findIndex(\n      (item) => item === this.navigationItem\n    );\n\n    if (key === 'ArrowDown') {\n      indexOfNavigationItem++;\n    } else {\n      indexOfNavigationItem--;\n    }\n\n    const newFocusItem = items[indexOfNavigationItem];\n    this.applyFocusTo(newFocusItem);\n  }\n\n  private applyFocusTo(element: HTMLIxSelectItemElement) {\n    if (!element) {\n      return;\n    }\n    this.navigationItem = element;\n\n    setTimeout(() => {\n      element.shadowRoot\n        .querySelector('ix-dropdown-item')\n        .shadowRoot.querySelector('button')\n        .focus();\n    });\n  }\n\n  private filterItemsWithTypeahead() {\n    this.inputFilterText = this.inputRef.value;\n\n    if (this.inputFilterText) {\n      this.items.forEach((item) => {\n        item.classList.remove('d-none');\n        if (\n          !item.label.toLowerCase().includes(this.inputFilterText.toLowerCase())\n        ) {\n          item.classList.add('d-none');\n        }\n      });\n    } else {\n      this.removeHiddenFromItems();\n    }\n\n    this.isDropdownEmpty = this.isEveryDropdownItemHidden;\n  }\n\n  private removeHiddenFromItems() {\n    this.items.forEach((item) => {\n      item.classList.remove('d-none');\n    });\n  }\n\n  private clearInput() {\n    this.inputRef.value = '';\n    this.inputFilterText = '';\n  }\n\n  private clear() {\n    this.clearInput();\n    this.selectedLabels = [];\n    this.value = [];\n    this.valueChange.emit(null);\n    this.dropdownShow = false;\n  }\n\n  private onInputBlur(e) {\n    if (this.editable) {\n      return;\n    }\n\n    if (this.isSingleMode) {\n      if (this.dropdownShow && this.isDropdownEmpty) {\n        this.dropdownShow = false;\n      }\n    }\n\n    if (!this.dropdownShow && this.mode !== 'multiple') {\n      e.target['value'] = this.selectedLabels;\n    }\n  }\n\n  private placeholderValue() {\n    if (this.editable) {\n      return this.i18nPlaceholderEditable;\n    }\n\n    if (this.readonly) {\n      return '';\n    }\n\n    return this.i18nPlaceholder;\n  }\n\n  private isAddItemVisible() {\n    return (\n      !this.itemExists(this.inputFilterText) &&\n      this.editable &&\n      this.inputFilterText\n    );\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            select: true,\n            disabled: this.disabled,\n            readonly: this.readonly,\n          }}\n          ref={(ref) => {\n            this.dropdownAnchor = ref;\n            if (!this.editable) this.dropdownWrapperRef = ref;\n          }}\n        >\n          <div class=\"input-container\">\n            <div class=\"chips\">\n              {this.isMultipleMode\n                ? this.selectedItems?.map((item) => (\n                    <ix-filter-chip\n                      disabled={this.disabled || this.readonly}\n                      key={item.value}\n                      onCloseClick={(e) => {\n                        e.preventDefault();\n                        e.stopPropagation();\n                        this.itemClick(item.value);\n                      }}\n                    >\n                      {item.label}\n                    </ix-filter-chip>\n                  ))\n                : ''}\n              <div class=\"trigger\">\n                <input\n                  data-testid=\"input\"\n                  disabled={this.disabled}\n                  readOnly={this.readonly}\n                  type=\"text\"\n                  class={{\n                    'allow-clear':\n                      this.allowClear && !!this.selectedLabels?.length,\n                  }}\n                  placeholder={this.placeholderValue()}\n                  value={this.inputValue}\n                  ref={(ref) => (this.inputRef = ref)}\n                  onBlur={(e) => this.onInputBlur(e)}\n                  onInput={() => this.filterItemsWithTypeahead()}\n                />\n                {this.allowClear &&\n                (this.selectedLabels?.length || this.inputFilterText) ? (\n                  <ix-icon-button\n                    class=\"clear\"\n                    icon={'clear'}\n                    ghost\n                    oval\n                    size=\"16\"\n                    onClick={(e) => {\n                      e.preventDefault();\n                      e.stopPropagation();\n                      this.clear();\n                    }}\n                  />\n                ) : null}\n                {this.disabled || this.readonly ? null : (\n                  <ix-icon-button\n                    data-select-dropdown\n                    class={{ 'dropdown-visible': this.dropdownShow }}\n                    icon=\"chevron-down-small\"\n                    ghost\n                    ref={(ref) => {\n                      if (this.editable) this.dropdownWrapperRef = ref;\n                    }}\n                  ></ix-icon-button>\n                )}\n              </div>\n            </div>\n          </div>\n        </div>\n        <ix-dropdown\n          ref={(ref) => (this.dropdownRef = ref)}\n          show={this.dropdownShow}\n          closeBehavior={this.isMultipleMode ? 'outside' : 'both'}\n          class={{\n            'd-none': this.disabled || this.readonly,\n          }}\n          anchor={this.dropdownAnchor}\n          trigger={this.dropdownWrapperRef}\n          onShowChanged={(e) => this.dropdownVisibilityChanged(e)}\n          placement=\"bottom-start\"\n          overwriteDropdownStyle={async () => {\n            return {\n              minWidth: `${this.hostElement.clientWidth}px`,\n            };\n          }}\n        >\n          <div\n            class={{\n              'select-list-header': true,\n              hidden: this.hideListHeader || this.isDropdownEmpty,\n            }}\n            title={this.i18nSelectListHeader}\n          >\n            {this.i18nSelectListHeader}\n          </div>\n          <slot></slot>\n          <div ref={(ref) => (this.addItemRef = ref)} class=\"d-contents\"></div>\n          {this.isAddItemVisible() ? (\n            <ix-dropdown-item\n              data-testid=\"add-item\"\n              icon={'plus'}\n              class={{\n                'add-item': true,\n              }}\n              label={this.inputFilterText}\n              onItemClick={(e) => {\n                e.preventDefault();\n                e.stopPropagation();\n                this.emitAddItem(this.inputFilterText);\n              }}\n            ></ix-dropdown-item>\n          ) : null}\n          {this.isDropdownEmpty && !this.editable ? (\n            <div class=\"select-list-header\">{this.i18nNoMatches}</div>\n          ) : (\n            ''\n          )}\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/select/test/select.ct.js

@@ -17,7 +17,7 @@ test('renders', async ({ mount, page }) => {
     `);
   const element = page.locator('ix-select');
   await expect(element).toHaveClass(/hydrated/);
-  await page.locator('.chevron-down-container').click();
+  await page.locator('[data-select-dropdown]').click();
   const dropdown = element.locator('ix-dropdown');
   await expect(dropdown).toBeVisible();
   await expect(page.getByRole('button', { name: 'Item 1' })).toBeVisible();
@@ -32,7 +32,7 @@ test('editable mode', async ({ mount, page }) => {
     `);
   const element = page.locator('ix-select');
   await expect(element).toHaveClass(/hydrated/);
-  await page.locator('.chevron-down-container').click();
+  await page.locator('[data-select-dropdown]').click();
   await page.getByTestId('input').fill('Not existing');
   const dropdown = element.locator('ix-dropdown');
   await expect(dropdown).toBeVisible();
@@ -41,11 +41,14 @@ test('editable mode', async ({ mount, page }) => {
   const add = page.getByRole('button', { name: /Not existing/ });
   await expect(add).toBeVisible();
   await add.click();
-  await page.locator('.chevron-down-container').click();
+  await expect(page.getByTestId('input')).toHaveValue(/Not existing/);
+  await page.locator('[data-select-dropdown]').click();
   await expect(page.getByRole('button', { name: 'Item 1' })).toBeVisible();
   await expect(page.getByRole('button', { name: 'Item 2' })).toBeVisible();
-  const addedItem = page.getByRole('button', { name: /Not existing/ });
-  await expect(addedItem.locator('i')).toBeVisible();
+  const addedItem = page
+    .getByRole('listitem')
+    .filter({ hasText: 'Not existing' });
+  await expect(addedItem).toBeVisible();
 });
 test('single selection', async ({ mount, page }) => {
   await mount(`
@@ -55,12 +58,12 @@ test('single selection', async ({ mount, page }) => {
         </ix-select>
     `);
   const element = page.locator('ix-select');
-  await element.evaluate((select) => (select.selectedIndices = ['22']));
-  await page.locator('.chevron-down-container').click();
+  await element.evaluate((select) => (select.value = '22'));
+  await page.locator('[data-select-dropdown]').click();
   const dropdown = element.locator('ix-dropdown');
   await expect(dropdown).toBeVisible();
   await expect(page.getByRole('button', { name: 'Item 1' })).toBeVisible();
-  await expect(page.getByRole('button', { name: 'Item 2' }).locator('i')).toBeVisible();
+  await expect(page.getByRole('button', { name: 'Item 2' }).locator('ix-icon')).toBeVisible();
 });
 test('multiple selection', async ({ mount, page }) => {
   await mount(`
@@ -72,17 +75,19 @@ test('multiple selection', async ({ mount, page }) => {
         </ix-select>
     `);
   const element = page.locator('ix-select');
-  await element.evaluate((select) => (select.selectedIndices = []));
-  await page.locator('.chevron-down-container').click();
+  await element.evaluate((select) => (select.value = []));
+  await page.locator('[data-select-dropdown]').click();
   const dropdown = element.locator('ix-dropdown');
   const chips = element.locator('.chips');
   await expect(dropdown).toBeVisible();
-  const item1 = page.getByRole('button', { name: 'Item 1' });
-  const item3 = page.getByRole('button', { name: 'Item 3' });
+  const item1 = element.locator('ix-select-item').nth(0);
+  const item3 = element.locator('ix-select-item').nth(2);
   await item1.click();
+  await page.locator('[data-select-dropdown]').click();
   await item3.click();
-  await expect(item1.locator('i')).toBeVisible();
-  await expect(item3.locator('i')).toBeVisible();
+  await page.locator('[data-select-dropdown]').click();
+  await expect(item1.locator('ix-icon')).toBeVisible();
+  await expect(item3.locator('ix-icon')).toBeVisible();
   const chip1 = chips.getByTitle('Item 1');
   const chip3 = chips.getByTitle('Item 3');
   await expect(chip1).toBeVisible();
@@ -98,8 +103,8 @@ test('filter', async ({ mount, page }) => {
         </ix-select>
     `);
   const element = page.locator('ix-select');
-  await element.evaluate((select) => (select.selectedIndices = []));
-  await page.locator('.chevron-down-container').click();
+  await element.evaluate((select) => (select.value = []));
+  await page.locator('[data-select-dropdown]').click();
   const dropdown = element.locator('ix-dropdown');
   await expect(dropdown).toBeVisible();
   await element.locator('input').fill('abc');