From a4c617538502c5631e6f2cf84fa8691a2b4d577c Mon Sep 17 00:00:00 2001
From: Egor Volvachev <34657605+volvachev@users.noreply.github.com>
Date: Sun, 27 Aug 2023 01:43:41 +0300
Subject: [PATCH] fix(primeng/p-chips): update the state of the `max` element
 when clear button is clicked (#13030)

Fixes #13011.
---
 src/app/components/chips/chips.ts | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/app/components/chips/chips.ts b/src/app/components/chips/chips.ts
index 6286854641a..5c91cb9fa1e 100755
--- 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();