Skip to content

Commit

Permalink
Fixed #14187 - MultiSelect | Provide implicit value as array of objects.
Browse files Browse the repository at this point in the history
  • Loading branch information
@cetincakiroglu
cetincakiroglu committed Nov 22, 2023
1 parent ef5ded7 commit f8d0000
Show file tree
Hide file tree
Showing 2 changed files with 26 additions and 10 deletions.
20 changes: 18 additions & 2 deletions src/app/components/multiselect/multiselect.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -178,7 +178,7 @@ export class MultiSelectItem {
<ng-container *ngIf="!modelValue() || modelValue().length === 0">{{ placeholder || defaultLabel || 'empty' }}</ng-container>
</ng-container>
</ng-container>
<ng-container *ngTemplateOutlet="selectedItemsTemplate; context: { $implicit: modelValue(), removeChip: removeOption.bind(this) }"></ng-container>
<ng-container *ngTemplateOutlet="selectedItemsTemplate; context: { $implicit: selectedOptions, removeChip: removeOption.bind(this) }"></ng-container>
</div>
<ng-container *ngIf="isVisibleClearIcon">
<TimesIcon *ngIf="!clearIconTemplate" [styleClass]="'p-multiselect-clear-icon'" (click)="clear($event)" [attr.data-pc-section]="'clearicon'" [attr.aria-hidden]="true" />
Expand Down Expand Up @@ -972,6 +972,8 @@ export class MultiSelect implements OnInit, AfterViewInit, AfterContentInit, Aft

focusedOptionIndex = signal<number>(-1);

selectedOptions: any;

get containerClass() {
return {
'p-multiselect p-component p-inputwrapper': true,
Expand Down Expand Up @@ -1086,7 +1088,15 @@ export class MultiSelect implements OnInit, AfterViewInit, AfterContentInit, Aft
return ObjectUtils.isNotEmpty(this.maxSelectedLabels) && this.modelValue() && this.modelValue().length > this.maxSelectedLabels ? this.modelValue().slice(0, this.maxSelectedLabels) : this.modelValue();
});

constructor(public el: ElementRef, public renderer: Renderer2, public cd: ChangeDetectorRef, public zone: NgZone, public filterService: FilterService, public config: PrimeNGConfig, public overlayService: OverlayService) {}
constructor(public el: ElementRef, public renderer: Renderer2, public cd: ChangeDetectorRef, public zone: NgZone, public filterService: FilterService, public config: PrimeNGConfig, public overlayService: OverlayService) {
effect(() => {
const modelValue = this.modelValue();
const visibleOptions = this.visibleOptions();
if (visibleOptions && ObjectUtils.isNotEmpty(visibleOptions) && modelValue) {
this.selectedOptions = visibleOptions.filter((option) => modelValue.includes(option[this.optionLabel]) || modelValue.includes(option[this.optionValue]));
}
})
}

ngOnInit() {
this.id = this.id || UniqueComponentId();
Expand Down Expand Up @@ -1250,6 +1260,11 @@ export class MultiSelect implements OnInit, AfterViewInit, AfterContentInit, Aft
});
}


findSelectedOptionIndex() {
return this.hasSelectedOption() ? this.visibleOptions().findIndex((option) => this.isValidSelectedOption(option)) : -1;
}

onOptionSelectRange(event, start = -1, end = -1) {
start === -1 && (start = this.findNearestSelectedOptionIndex(end, true));
end === -1 && (end = this.findNearestSelectedOptionIndex(start));
Expand Down Expand Up @@ -1930,6 +1945,7 @@ export class MultiSelect implements OnInit, AfterViewInit, AfterContentInit, Aft
this.value = null;
this.checkSelectionLimit();
this.updateModel(null, event);
this.selectedOptions = null;
this.onClear.emit();

event.stopPropagation();
Expand Down
16 changes: 8 additions & 8 deletions src/app/showcase/doc/multiselect/templatedoc.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,11 @@ interface Country {
<div class="card flex justify-content-center">
<p-multiSelect [options]="countries" [(ngModel)]="selectedCountries" placeholder="Select Countries" optionLabel="name">
<ng-template let-value pTemplate="selectedItems">
<div class="inline-flex align-items-center gap-2 px-1" *ngFor="let option of selectedCountries">
<div class="inline-flex align-items-center gap-2 px-1" *ngFor="let option of value">
<img src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + option.code.toLowerCase()" style="width: 18px" />
<div>{{ option.name }},</div>
</div>
<div *ngIf="!selectedCountries || selectedCountries.length === 0">Select Countries</div>
<div *ngIf="!value || value.length === 0">Select Countries</div>
</ng-template>
<ng-template let-country pTemplate="item">
<div class="flex align-items-center gap-2">
Expand Down Expand Up @@ -60,11 +60,11 @@ export class TemplateDoc implements OnInit {
basic: `
<p-multiSelect [options]="countries" [(ngModel)]="selectedCountries" placeholder="Select Countries" optionLabel="name">
<ng-template let-value pTemplate="selectedItems">
<div class="inline-flex align-items-center gap-2 px-1" *ngFor="let option of selectedCountries">
<div class="inline-flex align-items-center gap-2 px-1" *ngFor="let option of value">
<img src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + option.code.toLowerCase()" style="width: 18px" />
<div>{{ option.name }}, </div>
<div>{{ option.name }},</div>
</div>
<div *ngIf="!selectedCountries || selectedCountries.length === 0">Select Countries</div>
<div *ngIf="!value || value.length === 0">Select Countries</div>
</ng-template>
<ng-template let-country pTemplate="item">
<div class="flex align-items-center gap-2">
Expand All @@ -78,11 +78,11 @@ export class TemplateDoc implements OnInit {
<div class="card flex justify-content-center">
<p-multiSelect [options]="countries" [(ngModel)]="selectedCountries" placeholder="Select a Country" optionLabel="name">
<ng-template let-value pTemplate="selectedItems">
<div class="inline-flex align-items-center gap-2 px-1" *ngFor="let option of selectedCountries">
<div class="inline-flex align-items-center gap-2 px-1" *ngFor="let option of value">
<img src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + option.code.toLowerCase()" style="width: 18px" />
<div>{{ option.name }}, </div>
<div>{{ option.name }},</div>
</div>
<div *ngIf="!selectedCountries || selectedCountries.length === 0">Select Countries</div>
<div *ngIf="!value || value.length === 0">Select Countries</div>
</ng-template>
<ng-template let-country pTemplate="item">
<div class="flex align-items-center gap-2">
Expand Down

1 comment on commit f8d0000

@vercel
Copy link

@vercel vercel bot commented on f8d0000 Nov 22, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

primeng-ssr-test – ./

primeng-ssr-test.vercel.app
primeng-ssr-test-primeng-test.vercel.app
primeng-ssr-test-git-master-primeng-test.vercel.app

Please sign in to comment.