diff --git a/src/app/components/chips/chips.spec.ts b/src/app/components/chips/chips.spec.ts index 263dfce3d6d..e7b3737f9bf 100755 --- a/src/app/components/chips/chips.spec.ts +++ b/src/app/components/chips/chips.spec.ts @@ -258,6 +258,14 @@ describe('Chips', () => { expect(inputEl.nativeElement.disabled).toEqual(false); }); + it('should set maxlength to input element', () => { + chips.max = 2; + fixture.detectChanges(); + + const inputEl = fixture.debugElement.query(By.css('input')); + expect(inputEl.attributes.maxlength).toEqual('2'); + }); + it('should delete item', () => { chips.value = ['primeng']; fixture.detectChanges(); diff --git a/src/app/components/chips/chips.ts b/src/app/components/chips/chips.ts index 673910f4ed2..990e4faf433 100755 --- a/src/app/components/chips/chips.ts +++ b/src/app/components/chips/chips.ts @@ -77,6 +77,7 @@ export const CHIPS_VALUE_ACCESSOR: any = { #inputtext type="text" [attr.id]="inputId" + [attr.maxlength]="maxLength" [attr.placeholder]="value && value.length ? null : placeholder" [attr.tabindex]="tabindex" (keydown)="onKeyDown($event)" @@ -140,6 +141,11 @@ export class Chips implements AfterContentInit, ControlValueAccessor { * @group Props */ @Input() max: number | undefined; + /** + * Maximum length of a chip. + * @group Props + */ + @Input() maxLength: number | undefined; /** * Defines a string that labels the input for accessibility. * @group Props diff --git a/src/app/showcase/doc/apidoc/index.json b/src/app/showcase/doc/apidoc/index.json index 55e096e9ea3..d628759bbaa 100644 --- a/src/app/showcase/doc/apidoc/index.json +++ b/src/app/showcase/doc/apidoc/index.json @@ -7190,6 +7190,13 @@ "type": "number", "description": "Maximum number of entries allowed." }, + { + "name": "maxLength", + "optional": false, + "readonly": false, + "type": "number", + "description": "Maximum length of a chip." + }, { "name": "ariaLabel", "optional": false, @@ -27736,4 +27743,4 @@ } } } -} \ No newline at end of file +}