Merge pull request #1405 from Infineon/991-multiselect-when-select-is…

…-set-to-true-on-an-option-its-checkbox-remains-unchecked-on-the-menu

991 multiselect when select is set to true on an option its checkbox remains unchecked on the menu

lerna.json

@@ -1,6 +1,6 @@
 {
   "$schema": "node_modules/lerna/schemas/lerna-schema.json",
-  "version": "24.3.0",
+  "version": "24.3.1--canary.1405.fc5d5fdb6f84b4aa808b4927beba383ce6e7f5e7.0",
   "command": {
     "publish": {
       "verifyAccess": false

packages/components-angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "components-angular",
-  "version": "24.3.0",
+  "version": "24.3.1--canary.1405.fc5d5fdb6f84b4aa808b4927beba383ce6e7f5e7.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
@@ -26,7 +26,7 @@
     "@angular/platform-browser": "^17.3.3",
     "@angular/platform-browser-dynamic": "^17.3.3",
     "@angular/router": "^17.3.3",
-    "@infineon/infineon-design-system-angular": "^24.3.0",
+    "@infineon/infineon-design-system-angular": "^24.3.1--canary.1405.fc5d5fdb6f84b4aa808b4927beba383ce6e7f5e7.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.4"

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

@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-angular",
-  "version": "24.3.0",
+  "version": "24.3.1--canary.1405.fc5d5fdb6f84b4aa808b4927beba383ce6e7f5e7.0",
   "description": "Infineon design system Stencil web components for Angular",
   "author": "Verena Lechner",
   "license": "MIT",
@@ -11,7 +11,7 @@
     "@angular/common": "^17.3.3",
     "@angular/core": "^17.3.3",
     "@infineon/design-system-tokens": "3.3.2",
-    "@infineon/infineon-design-system-stencil": "^24.3.0"
+    "@infineon/infineon-design-system-stencil": "^24.3.1--canary.1405.fc5d5fdb6f84b4aa808b4927beba383ce6e7f5e7.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"

packages/components-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-react",
-  "version": "24.3.0",
+  "version": "24.3.1--canary.1405.fc5d5fdb6f84b4aa808b4927beba383ce6e7f5e7.0",
   "description": "Infineon design system Stencil web components for React",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -28,7 +28,7 @@
   },
   "dependencies": {
     "@infineon/design-system-tokens": "3.3.2",
-    "@infineon/infineon-design-system-stencil": "24.3.0"
+    "@infineon/infineon-design-system-stencil": "24.3.1--canary.1405.fc5d5fdb6f84b4aa808b4927beba383ce6e7f5e7.0"
   },
   "auto": {
     "plugins": [

packages/components-vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-vue",
-  "version": "24.3.0",
+  "version": "24.3.1--canary.1405.fc5d5fdb6f84b4aa808b4927beba383ce6e7f5e7.0",
   "description": "Infineon design system Stencil web components for Vue",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -31,7 +31,7 @@
   },
   "dependencies": {
     "@infineon/design-system-tokens": "3.3.2",
-    "@infineon/infineon-design-system-stencil": "24.3.0"
+    "@infineon/infineon-design-system-stencil": "24.3.1--canary.1405.fc5d5fdb6f84b4aa808b4927beba383ce6e7f5e7.0"
   },
   "auto": {
     "plugins": [

packages/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-stencil",
-  "version": "24.3.0",
+  "version": "24.3.1--canary.1405.fc5d5fdb6f84b4aa808b4927beba383ce6e7f5e7.0",
   "private": false,
   "description": "Infineon design system Stencil web components",
   "homepage": "https://infineon.github.io/infineon-design-system-stencil",

packages/components/src/components/select/multi-select/multiselect.stories.ts

@@ -30,6 +30,29 @@ const options = [
   },
 ];
 
+const longOptions = [];
+for (let i=1; i<=50; i++) {
+  let children = undefined;
+  if (i % 3 == 0) {
+    children = [{
+      "value":  `${i}.1`,
+      "label": `Option ${i}.1`,
+      "selected": i % 2 == 0 ? true : false
+    },{
+      "value": `${i}.2`,
+      "label": `Option ${i}.2`,
+      "selected": i % 4 == 0 ? true : false
+    }];
+  }
+  longOptions.push({
+    "value": i,
+    "label": `Option ${i}`,
+    "selected": i % 2 == 0 ? true : false,
+    "children": children
+  })
+}
+
+
 export default {
   title: 'Components/Select/Multi Select',
   // tags: ['autodocs'],
@@ -120,7 +143,7 @@ export default {
   },
 };
 
-const DefaultTemplate = args => {
+const Template = args => {
   const template = `<ifx-multiselect 
   options='${JSON.stringify(args.options)}' 
   batch-size='${args.batchSize}'
@@ -142,7 +165,14 @@ const DefaultTemplate = args => {
   return template;
 };
 
-export const Default = DefaultTemplate.bind({});
+export const Default = Template.bind({});
 Default.args = {
   options: options,
 };
+
+export const WithLazyLoading = Template.bind({});
+WithLazyLoading.args = {
+  options: longOptions,
+  batchSize: 5,
+  maxItemCount: undefined
+};

packages/components/src/components/select/multi-select/multiselect.tsx

@@ -47,6 +47,7 @@ export class Multiselect {
   @Prop() showSearch: boolean = true;
   @Prop() showSelectAll: boolean = true;
   @State() optionCount: number = 0; // number of all options (leaves of the tree)
+  @State() optionsProcessed: boolean = false; // flag whether options have already been counted, intial selections saved
 
 
   @Event() ifxSelect: EventEmitter;
@@ -101,19 +102,63 @@ export class Multiselect {
       console.error('Unexpected value for options:', this.options);
     }
 
-    this.optionCount = this.countOptions(allOptions);
-
+    if (!this.optionsProcessed) {
+      this.optionCount = this.countOptions(allOptions);
+      const initiallySelected = this.collectSelectedOptions(allOptions);
+      const initallySelectedNotInState = initiallySelected.filter(init => !this.persistentSelectedOptions.some(opt => opt.value == init.value));
+      this.persistentSelectedOptions = [...this.persistentSelectedOptions, ...initallySelectedNotInState];
+      this.optionsProcessed = true;
+    }
+
     // Slice the options array based on startIndex and count
     const slicedOptions = allOptions.slice(startIndex, startIndex + count);
+    return slicedOptions;
+  }
 
-    // Update the state for initially selected options, if needed
-    if (startIndex === 0) { // Assuming you want to do this only for the first batch
-      const initiallySelected = slicedOptions.filter(option => option.selected);
-      const initallyAndNotAdded = initiallySelected.filter(init => !this.persistentSelectedOptions.some(opt => opt.value == init.value));
-      this.persistentSelectedOptions = [...this.persistentSelectedOptions, ...initallyAndNotAdded];
+  /**
+   * Collects and returns all options that are selected.
+   * When the parent is selected, then the value of the children will be overriden with selected as well.
+   * It will only collect the leaves of the tree.
+   * 
+   * @param options A list of options.
+   * @returns A list with all selected options
+   */
+  private collectSelectedOptions(options: Option[]): Option[] {
+    let selectedOptions: Option[] = [];
+
+    for (const option of options) {
+      if (option.selected) {
+        if (option.children && option.children.length > 0) {
+          // if parent is selected, then select all child options
+          selectedOptions = selectedOptions.concat(this.collectLeafOptions(option.children));
+        } else {
+          selectedOptions.push(option);
+        }
+      } else {
+        if (option.children && option.children.length > 0) {
+          selectedOptions = selectedOptions.concat(this.collectSelectedOptions(option.children));
+        }
+      }
     }
+    return selectedOptions;
+  }
 
-    return slicedOptions;
+  /**
+   * Collects all leaf children options.
+   * 
+   * @param option A list with all leaf-children.
+   */
+  private collectLeafOptions(children: Option[]): Option[] {
+    let leafOptions = [];
+
+    for (const child of children) {
+      if (child.children && child.children.length > 0) {
+        leafOptions = leafOptions.concat(this.collectLeafOptions(child.children));
+      } else {
+        leafOptions.push(child);
+      }
+    }  
+    return leafOptions;
   }
 
   /**