Issue 13862: MultiSelect: Label does not properly update when properties change

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');
+    });
 });

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;