diff --git a/src/app/components/multiselect/multiselect.spec.ts b/src/app/components/multiselect/multiselect.spec.ts index de7e9b09f77..273ea7173ac 100755 --- a/src/app/components/multiselect/multiselect.spec.ts +++ b/src/app/components/multiselect/multiselect.spec.ts @@ -568,4 +568,40 @@ describe('MultiSelect', () => { expect(emptyMesage).toBeTruthy(); expect(emptyMesage.nativeElement.textContent).toContain('No results found'); }); + + it('should change the computed label when dependent properties are changed', () => { + multiselect.options = [ + { label: 'Audi', value: 'Audi' }, + { label: 'BMW', value: 'BMW' }, + { label: 'Fiat', value: 'Fiat' }, + { label: 'Ford', value: 'Ford' }, + { label: 'Honda', value: 'Honda' }, + { label: 'Jaguar', value: 'Jaguar' }, + { label: 'Mercedes', value: 'Mercedes' }, + { label: 'Renault', value: 'Renault' }, + { label: 'VW', value: 'VW' }, + { label: 'Volvo', value: 'Volvo' } + ]; + fixture.detectChanges(); + + const multiselectEl = fixture.debugElement.children[0].nativeElement; + multiselectEl.click(); + fixture.detectChanges(); + + const multiselectItemEl = fixture.debugElement.queryAll(By.css('.p-multiselect-item')); + const bmwEl = multiselectItemEl[1]; + bmwEl.nativeElement.click(); + fixture.detectChanges(); + + multiselect.cd.detectChanges(); + const labelEl = fixture.debugElement.query(By.css('.p-multiselect-label')); + expect(labelEl.nativeElement.textContent).toContain('BMW'); + + multiselect.maxSelectedLabels = 0; + multiselect.selectedItemsLabel = '{0} item(s) selected'; + fixture.detectChanges(); + + multiselect.cd.detectChanges(); + expect(labelEl.nativeElement.textContent).toContain('1 item(s) selected'); + }); }); diff --git a/src/app/components/multiselect/multiselect.ts b/src/app/components/multiselect/multiselect.ts index 9ddc4258e19..a4eb394c7bd 100755 --- a/src/app/components/multiselect/multiselect.ts +++ b/src/app/components/multiselect/multiselect.ts @@ -440,21 +440,6 @@ export class MultiSelect implements OnInit, AfterViewInit, AfterContentInit, Aft * @group Props */ @Input() ariaLabelledBy: string | undefined; - /** - * Whether to show labels of selected item labels or use default label. - * @group Props - */ - @Input() displaySelectedLabel: boolean = true; - /** - * Decides how many selected item labels to show at most. - * @group Props - */ - @Input() maxSelectedLabels: number = 3; - /** - * Label to display after exceeding max selected labels e.g. ({0} items selected), defaults "ellipsis" keyword to indicate a text-overflow. - * @group Props - */ - @Input() selectedItemsLabel: string = 'ellipsis'; /** * Whether to show the checkbox at header to toggle all items at once. * @group Props @@ -666,6 +651,39 @@ export class MultiSelect implements OnInit, AfterViewInit, AfterContentInit, Aft get placeholder(): string | undefined { return this._placeholder; } + /** + * Whether to show labels of selected item labels or use default label. + * @group Props + */ + @Input() set displaySelectedLabel(val: boolean) { + this._displaySelectedLabel = val; + this.updateLabel(); + } + get displaySelectedLabel(): boolean { + return this._displaySelectedLabel; + } + /** + * Decides how many selected item labels to show at most. + * @group Props + */ + @Input() set maxSelectedLabels(val: number) { + this._maxSelectedLabels = val; + this.updateLabel(); + } + get maxSelectedLabels(): number { + return this._maxSelectedLabels; + } + /** + * Label to display after exceeding max selected labels e.g. ({0} items selected), defaults "ellipsis" keyword to indicate a text-overflow. + * @group Props + */ + @Input() set selectedItemsLabel(val: string) { + this._selectedItemsLabel = val; + this.updateLabel(); + } + get selectedItemsLabel(): string { + return this._selectedItemsLabel; + } /** * An array of objects to display as the available options. * @group Props @@ -800,6 +818,12 @@ export class MultiSelect implements OnInit, AfterViewInit, AfterContentInit, Aft _placeholder: string | undefined; + _displaySelectedLabel: boolean = true; + + _maxSelectedLabels: number = 3; + + _selectedItemsLabel: string = 'ellipsis'; + _itemSize: number | undefined; _selectionLimit: number | undefined;