Merge pull request #1735 from Infineon/1730-ifx-select-search-field-click-should-not-close-the-menu

ifx-select: prevents dropdown menu from closing on search-field click

Author: tishoyanchev

examples/wrapper-components/react-vite-js/package.json

@@ -18,7 +18,7 @@
     "test:local": "run-p preview:link watch:library"
   },
   "dependencies": {
-    "@infineon/infineon-design-system-react": "32.1.3--canary.1732.d3813f209f738a14784b9c29ce072ceb36068e2f.0",
+    "@infineon/infineon-design-system-react": "32.3.0--canary.1735.caab07de0687d0c12e1cd3ff61f282de3445523b.0",
     "path": "^0.12.7",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"

examples/wrapper-components/vue-javascript/package.json

@@ -15,7 +15,7 @@
     "test:local": "run-p preview:link watch:library"
   },
   "dependencies": {
-    "@infineon/infineon-design-system-vue": "32.1.3--canary.1732.d3813f209f738a14784b9c29ce072ceb36068e2f.0",
+    "@infineon/infineon-design-system-vue": "32.3.0--canary.1735.caab07de0687d0c12e1cd3ff61f282de3445523b.0",
     "@vitejs/plugin-vue": "^4.0.0",
     "@vitejs/plugin-vue-jsx": "^4.0.0",
     "vite": "^5.0.12",

lerna.json

@@ -1,6 +1,6 @@
 {
   "$schema": "node_modules/lerna/schemas/lerna-schema.json",
-  "version": "32.1.3--canary.1732.d3813f209f738a14784b9c29ce072ceb36068e2f.0",
+  "version": "32.3.0--canary.1735.caab07de0687d0c12e1cd3ff61f282de3445523b.0",
   "command": {
     "publish": {
       "verifyAccess": false

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "components-angular",
-  "version": "32.1.3--canary.1732.d3813f209f738a14784b9c29ce072ceb36068e2f.0",
+  "version": "32.3.0--canary.1735.caab07de0687d0c12e1cd3ff61f282de3445523b.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
@@ -26,7 +26,7 @@
     "@angular/platform-browser": "^18.0.0",
     "@angular/platform-browser-dynamic": "^18.0.0",
     "@angular/router": "^18.0.0",
-    "@infineon/infineon-design-system-angular": "^32.1.3--canary.1732.d3813f209f738a14784b9c29ce072ceb36068e2f.0",
+    "@infineon/infineon-design-system-angular": "^32.3.0--canary.1735.caab07de0687d0c12e1cd3ff61f282de3445523b.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "typescript": "~5.4.4",

packages/components-angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-angular",
-  "version": "32.1.3--canary.1732.d3813f209f738a14784b9c29ce072ceb36068e2f.0",
+  "version": "32.3.0--canary.1735.caab07de0687d0c12e1cd3ff61f282de3445523b.0",
   "description": "Infineon design system Stencil web components for Angular",
   "author": "Verena Lechner",
   "license": "MIT",
@@ -11,7 +11,7 @@
     "@angular/common": "^18.0.0",
     "@angular/core": "^18.0.0",
     "@infineon/design-system-tokens": "3.3.4",
-    "@infineon/infineon-design-system-stencil": "32.1.3--canary.1732.d3813f209f738a14784b9c29ce072ceb36068e2f.0"
+    "@infineon/infineon-design-system-stencil": "32.3.0--canary.1735.caab07de0687d0c12e1cd3ff61f282de3445523b.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"

packages/components-angular/projects/component-library/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-react",
-  "version": "32.1.3--canary.1732.d3813f209f738a14784b9c29ce072ceb36068e2f.0",
+  "version": "32.3.0--canary.1735.caab07de0687d0c12e1cd3ff61f282de3445523b.0",
   "description": "Infineon design system Stencil web components for React",
   "main": "./dist/index.js",
   "types": "./dist/types/index.d.ts",
@@ -28,7 +28,7 @@
   },
   "dependencies": {
     "@infineon/design-system-tokens": "3.3.4",
-    "@infineon/infineon-design-system-stencil": "^32.1.3--canary.1732.d3813f209f738a14784b9c29ce072ceb36068e2f.0",
+    "@infineon/infineon-design-system-stencil": "^32.3.0--canary.1735.caab07de0687d0c12e1cd3ff61f282de3445523b.0",
     "@stencil/react-output-target": "^0.7.1"
   },
   "auto": {

packages/components-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-vue",
-  "version": "32.1.3--canary.1732.d3813f209f738a14784b9c29ce072ceb36068e2f.0",
+  "version": "32.3.0--canary.1735.caab07de0687d0c12e1cd3ff61f282de3445523b.0",
   "description": "Infineon design system Stencil web components for Vue",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -30,7 +30,7 @@
   },
   "dependencies": {
     "@infineon/design-system-tokens": "3.3.4",
-    "@infineon/infineon-design-system-stencil": "^32.1.3--canary.1732.d3813f209f738a14784b9c29ce072ceb36068e2f.0"
+    "@infineon/infineon-design-system-stencil": "^32.3.0--canary.1735.caab07de0687d0c12e1cd3ff61f282de3445523b.0"
   },
   "auto": {
     "plugins": [

packages/components-vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-stencil",
-  "version": "32.1.3--canary.1732.d3813f209f738a14784b9c29ce072ceb36068e2f.0",
+  "version": "32.3.0--canary.1735.caab07de0687d0c12e1cd3ff61f282de3445523b.0",
   "private": false,
   "description": "Infineon design system Stencil web components",
   "homepage": "https://infineon.github.io/infineon-design-system-stencil",

packages/components/package.json

@@ -335,6 +335,17 @@ export class Choices implements IChoicesProps, IChoicesMethods {
     }
   }
 
+  private handleWrapperClick(event: MouseEvent) {
+    const target = event.target as HTMLElement;
+    const isSearchInput = target.classList.contains('choices__input') || target.closest('.choices__input');
+    const isDropdownItem = target.closest('.choices__list--dropdown .choices__item');
+  
+    // Only toggle dropdown if clicking on wrapper itself
+    if (!isSearchInput && !isDropdownItem) {
+      this.toggleDropdown();
+    }
+  }
+
   protected render(): any {
     const attributes = {
       'data-selector': 'root',
@@ -358,7 +369,7 @@ export class Choices implements IChoicesProps, IChoicesMethods {
           class={`${choicesWrapperClass} 
             ${this.disabled ? 'disabled' : ''} 
             ${this.error ? 'error' : ''}`}
-          onClick={this.disabled ? undefined : () => this.toggleDropdown()}
+          onClick={this.disabled ? undefined : (e) => this.handleWrapperClick(e)}
           onKeyDown={event => this.handleKeyDown(event)}
         >
           <select class='single__select-input-field' disabled = {this.disabled} {...attributes} data-trigger onChange={() => this.handleChange()}>