Select: Properly initialise selected options for select with multiple attribute

Author: mpellerin42

CHANGELOG.md

@@ -1,3 +1,9 @@
+# 2.68.6 (2025-04-25)
+
+### Bug fix
+
+- **Select**: Properly initialise selected options for select with `multiple: true`
+
 # 2.68.5 (2025-04-22)
 
 ### Improvement

projects/demo/src/app/demo/pages/select-page/select-page.component.html

@@ -102,9 +102,9 @@ <h3>Dynamic options</h3>
             multiple
             placeholder="Select one or more options"
             [options]="multipleOptions"
-            (valueChange)="multipleSelection = $event"
+            [formControl]="multipleSelectControl"
             label="Multiple selection"></pa-select>
-          <div style="flex: 1">Value: {{ multipleSelection }}</div>
+          <div style="flex: 1">Value: {{ multipleSelectControl.getRawValue() }}</div>
         </div>
       </div>
     </div>

projects/demo/src/app/demo/pages/select-page/select-page.component.ts

@@ -1,4 +1,5 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { FormControl } from '@angular/forms';
 import { OptionHeaderModel, OptionModel, OptionSeparator } from '@guillotinaweb/pastanaga-angular';
 
 @Component({
@@ -10,6 +11,8 @@ export class SelectPageComponent {
   model = '';
   selectedTab = 'standalone';
 
+  multipleSelectControl = new FormControl<string>('user1,audio3');
+
   optionsWithDescription: (OptionModel | OptionSeparator | OptionHeaderModel)[] = [
     new OptionModel({ id: 'desc1', label: 'Option 1', help: 'Description 1', value: 'desc1' }),
     new OptionModel({

projects/pastanaga-angular/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@guillotinaweb/pastanaga-angular",
   "description": "Provides Pastanaga UI elements as Angular components",
-  "version": "2.68.5",
+  "version": "2.68.6",
   "license": "MIT",
   "keywords": [
     "angular",

projects/pastanaga-angular/src/assets/glyphs-sprite.svg

@@ -108,7 +108,13 @@ export class SelectComponent extends TextFieldDirective implements OnChanges, Af
     this._handleNgContent();
     this._checkDescribedBy();
     this.focusInput();
-    this._updateDisplayedValue(this.control.value);
+    if (this.multiple) {
+      this._updateDisplayMultipleValues(this.control.value);
+      this._initSelectedOptionsForMultipleValue();
+    } else {
+      this._updateDisplayedValue(this.control.value);
+    }
+
     // valueChanges may be triggered by an update value and validity...
     // we don't want to recompute the displayed option label in that case
     this.control.valueChanges.pipe(distinctUntilChanged(), takeUntil(this.terminator$)).subscribe((val) => {
@@ -234,6 +240,18 @@ export class SelectComponent extends TextFieldDirective implements OnChanges, Af
     detectChanges(this.cdr);
   }
 
+  private _initSelectedOptionsForMultipleValue() {
+    const selectedValues = this.control.value.split(',');
+    (this.dropdownOptions || []).forEach((dropdownOption) => {
+      if (dropdownOption.type === ControlType.option) {
+        const option = dropdownOption as OptionModel;
+        if (selectedValues.includes(option.value)) {
+          this.selectedOptions.push(option);
+        }
+      }
+    });
+  }
+
   private _findLabelByValue(value?: string): string | undefined {
     let label: string | undefined;
 
@@ -288,10 +306,19 @@ export class SelectComponent extends TextFieldDirective implements OnChanges, Af
   }
 
   private _toggleSelectedOption(option: OptionComponent | OptionModel) {
-    if (option.selected && option.value !== this.control.value) {
-      option.selected = false;
-    } else if (!option.selected && option.value === this.control.value) {
-      option.selected = true;
+    if (this.multiple) {
+      const selectedValues = this.control.value.split(',');
+      if (option.selected && !selectedValues.includes(option.value)) {
+        option.selected = false;
+      } else if (!option.selected && selectedValues.includes(option.value)) {
+        option.selected = true;
+      }
+    } else {
+      if (option.selected && option.value !== this.control.value) {
+        option.selected = false;
+      } else if (!option.selected && option.value === this.control.value) {
+        option.selected = true;
+      }
     }
   }