@infineon/infineon-design-system-stencil 30.5.0 → 30.5.1--canary.1655.9885959d458e06593271685d632a6120c4904eb3.0

package/dist/esm/ifx-select.entry.js

@@ -6900,12 +6900,15 @@ const Choices = class {
     }
     handleDeleteSelection() {
         this.clearInput();
-        this.selectedOption = null;
+        this.clearSelectField();
         this.setPreSelected(null);
         this.closeDropdown();
-        this.ifxSelect.emit(null);
         this.optionIsSelected = false;
     }
+    clearSelectField() {
+        this.selectedOption = null;
+        this.ifxSelect.emit(null);
+    }
     async handleChange() {
         this.ifxSelect.emit(this.choice.getValue());
         this.selectedOption = this.choice.getValue(); //store the selected option to reflect it in the template function
@@ -7039,6 +7042,7 @@ const Choices = class {
     }
     componentWillUpdate() {
         this.handleCloseButton();
+        this.clearSelectField();
     }
     addResizeObserver() {
         this.resizeObserver = new ResizeObserver(() => {
@@ -7074,9 +7078,9 @@ const Choices = class {
         // destroy choices element to restore previous dom structure
         // so vdom can replace the element correctly
         this.destroy();
-        return (h("div", { key: 'c41ec36261a1133b438648bc6a564107267c5b1a', class: `ifx-select-container` }, this.label ? (h("div", { class: "ifx-label-wrapper" }, h("span", null, this.label))) : null, h("div", { key: 'dae048e7ad4c6a40bf5c900fb5c2c2e01ea58a4e', class: `${choicesWrapperClass} 
+        return (h("div", { key: '0b80fbf12bc170ffd8d683244254c1203b7cff00', class: `ifx-select-container` }, this.label ? (h("div", { class: "ifx-label-wrapper" }, h("span", null, this.label))) : null, h("div", { key: '22c0014b84cb785547ca9f8ebf7ec4ea97aff799', class: `${choicesWrapperClass} 
             ${this.disabled ? 'disabled' : ''} 
-            ${this.error ? 'error' : ''}`, onClick: this.disabled ? undefined : () => this.toggleDropdown(), onKeyDown: event => this.handleKeyDown(event) }, h("select", Object.assign({ key: '8fa127e6a04061b43359c3131c607fbc001ea4c9', class: 'single__select-input-field', disabled: this.disabled }, attributes, { "data-trigger": true, onChange: () => this.handleChange() }), this.createSelectOptions(this.options)), h("div", { key: 'fcafbc54f77fcfcbc4ad7b78a71627f5bd415592', class: "single__select-icon-container" }, this.optionIsSelected && (h("div", { key: '590bdc1f9020dc23691d4aa590e6e679983545b0', class: "ifx-choices__icon-wrapper-delete" }, h("ifx-icon", { key: 'ff9536f8830baf07ae90492f99ec74b514abb3e5', icon: "cremove16", onClick: () => this.handleDeleteSelection() }))), h("div", { key: 'f60e834881062bcbd15df2d2a282860ee5be71c7', class: "ifx-choices__icon-wrapper-up" }, h("ifx-icon", { key: "icon-up", icon: "chevronup-16" })), h("div", { key: '9d61e8aeefd0714d80a7bf812f5f9a51bc1671a6', class: "ifx-choices__icon-wrapper-down" }, h("ifx-icon", { key: "icon-down", icon: "chevron-down-16" })))), this.error ? (h("div", { class: "ifx-error-message-wrapper" }, h("span", null, this.errorMessage))) : null));
+            ${this.error ? 'error' : ''}`, onClick: this.disabled ? undefined : () => this.toggleDropdown(), onKeyDown: event => this.handleKeyDown(event) }, h("select", Object.assign({ key: 'a622c7cf6ee90850ba1d640d1e600f26447b92ef', class: 'single__select-input-field', disabled: this.disabled }, attributes, { "data-trigger": true, onChange: () => this.handleChange() }), this.createSelectOptions(this.options)), h("div", { key: 'e6ce74bacf6aae8d8e6b4f7cb688ae480721ea42', class: "single__select-icon-container" }, this.optionIsSelected && (h("div", { key: '05c1838e33693050debb5ed83b2c95f4d9d958e3', class: "ifx-choices__icon-wrapper-delete" }, h("ifx-icon", { key: 'b490d8eca9861f636c5b478974d6df6d5a3ab19d', icon: "cremove16", onClick: () => this.handleDeleteSelection() }))), h("div", { key: '926b34f8f945fff2a9eaeea7ef5c8ef7dba976b4', class: "ifx-choices__icon-wrapper-up" }, h("ifx-icon", { key: "icon-up", icon: "chevronup-16" })), h("div", { key: 'cd4eadb735c2a3b49c80e5a77aa87b943998ee95', class: "ifx-choices__icon-wrapper-down" }, h("ifx-icon", { key: "icon-down", icon: "chevron-down-16" })))), this.error ? (h("div", { class: "ifx-error-message-wrapper" }, h("span", null, this.errorMessage))) : null));
     }
     toggleDropdown() {
         const div = this.root.querySelector('.ifx-choices__wrapper');