fix(primeng/p-chips): update the state of the max element when clea…

…r button is clicked (primefaces#13030) Fixes primefaces#13011.
nbrown-ScottLogic · Aug 26, 2023 · a4c6175 · a4c6175
1 parent c64e7bd
commit a4c6175
Showing 1 changed file with 9 additions and 2 deletions.
diff --git a/src/app/components/chips/chips.ts b/src/app/components/chips/chips.ts
@@ -209,6 +209,10 @@ export class Chips implements AfterContentInit, ControlValueAccessor {
 
     filled: Nullable<boolean>;
 
+    private get isValueMaxLimited(): boolean {
+        return this.max && this.value && this.max === this.value.length;
+    }
+
     constructor(@Inject(DOCUMENT) private document: Document, public el: ElementRef, public cd: ChangeDetectorRef) {}
 
     ngAfterContentInit() {
@@ -341,8 +345,9 @@ export class Chips implements AfterContentInit, ControlValueAccessor {
 
     addItem(event: Event, item: string, preventDefault: boolean): void {
         this.value = this.value || [];
+
         if (item && item.trim().length) {
-            if (this.allowDuplicate || this.value.indexOf(item) === -1) {
+            if ((this.allowDuplicate || this.value.indexOf(item) === -1) && !this.isValueMaxLimited) {
                 this.value = [...this.value, item];
                 this.onModelChange(this.value);
                 this.onAdd.emit({
@@ -351,6 +356,7 @@ export class Chips implements AfterContentInit, ControlValueAccessor {
                 });
             }
         }
+
         this.updateFilledState();
         this.updateMaxedOut();
         this.inputViewChild.nativeElement.value = '';
@@ -364,6 +370,7 @@ export class Chips implements AfterContentInit, ControlValueAccessor {
         this.value = null;
         this.updateFilledState();
         this.onModelChange(this.value);
+        this.updateMaxedOut();
         this.onClear.emit();
     }
 
@@ -408,7 +415,7 @@ export class Chips implements AfterContentInit, ControlValueAccessor {
 
     updateMaxedOut(): void {
         if (this.inputViewChild && this.inputViewChild.nativeElement) {
-            if (this.max && this.value && this.max === this.value.length) {
+            if (this.isValueMaxLimited) {
                 // Calling `blur` is necessary because firefox does not call `onfocus` events
                 // for disabled inputs, unlike chromium browsers.
                 this.inputViewChild.nativeElement.blur();