Skip to content

Commit

Permalink
Fixed #5123
Browse files Browse the repository at this point in the history
  • Loading branch information
Çağatay Çivici authored and Çağatay Çivici committed Apr 19, 2018
1 parent 55aeeca commit 7464016
Showing 1 changed file with 34 additions and 20 deletions.
54 changes: 34 additions & 20 deletions src/app/components/chips/chips.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import {NgModule,Component,ElementRef,Input,Output,EventEmitter,AfterContentInit,ContentChildren,QueryList,TemplateRef,IterableDiffers,forwardRef} from '@angular/core';
import {NgModule,Component,ElementRef,Input,Output,EventEmitter,AfterContentInit,ContentChildren,QueryList,TemplateRef,IterableDiffers,forwardRef,ViewChild} from '@angular/core';
import {CommonModule} from '@angular/common';
import {SharedModule,PrimeTemplate} from '../common/shared';
import {InputTextModule} from '../inputtext/inputtext';
Expand All @@ -14,16 +14,16 @@ export const CHIPS_VALUE_ACCESSOR: any = {
@Component({
selector: 'p-chips',
template: `
<div [ngClass]="'ui-chips ui-widget'" [ngStyle]="style" [class]="styleClass">
<ul [ngClass]="{'ui-inputtext ui-state-default ui-corner-all':true,'ui-state-focus':focus,'ui-state-disabled':disabled}" (click)="inputtext.focus()">
<div [ngClass]="'ui-chips ui-widget'" [ngStyle]="style" [class]="styleClass" (click)="onClick($event)">
<ul [ngClass]="{'ui-inputtext ui-state-default ui-corner-all':true,'ui-state-focus':focus,'ui-state-disabled':disabled}">
<li #token *ngFor="let item of value; let i = index;" class="ui-chips-token ui-state-highlight ui-corner-all">
<span *ngIf="!disabled" class="ui-chips-token-icon fa fa-fw fa-close" (click)="removeItem($event,i)"></span>
<span *ngIf="!itemTemplate" class="ui-chips-token-label">{{field ? resolveFieldData(item,field) : item}}</span>
<ng-container *ngTemplateOutlet="itemTemplate; context: {$implicit: item}"></ng-container>
</li>
<li class="ui-chips-input-token">
<input #inputtext type="text" [attr.id]="inputId" [attr.placeholder]="(value && value.length ? null : placeholder)" [attr.tabindex]="tabindex" (keydown)="onKeydown($event,inputtext)"
(focus)="onInputFocus($event)" (blur)="onInputBlur($event,inputtext)" [disabled]="maxedOut||disabled" [disabled]="disabled" [ngStyle]="inputStyle" [class]="inputStyleClass">
<input #inputtext type="text" [attr.id]="inputId" [attr.placeholder]="(value && value.length ? null : placeholder)" [attr.tabindex]="tabindex" (keydown)="onKeydown($event)"
(focus)="onInputFocus($event)" (blur)="onInputBlur($event)" [disabled]="disabled" [ngStyle]="inputStyle" [class]="inputStyleClass">
</li>
</ul>
</div>
Expand Down Expand Up @@ -65,6 +65,8 @@ export class Chips implements AfterContentInit,ControlValueAccessor {
@Output() onFocus: EventEmitter<any> = new EventEmitter();

@Output() onBlur: EventEmitter<any> = new EventEmitter();

@ViewChild('inputtext') inputViewChild: ElementRef;

@ContentChildren(PrimeTemplate) templates: QueryList<any>;

Expand Down Expand Up @@ -96,8 +98,13 @@ export class Chips implements AfterContentInit,ControlValueAccessor {
});
}

onClick(event) {
this.inputViewChild.nativeElement.focus();
}

writeValue(value: any) : void {
this.value = value;
this.updateMaxedOut();
}

registerOnChange(fn: Function): void {
Expand Down Expand Up @@ -136,11 +143,11 @@ export class Chips implements AfterContentInit,ControlValueAccessor {
this.onFocus.emit(event);
}

onInputBlur(event: FocusEvent, inputEL: HTMLInputElement) {
onInputBlur(event: FocusEvent) {
this.focus = false;
if(this.addOnBlur && inputEL.value) {
this.addItem(event, inputEL.value);
inputEL.value = '';
if(this.addOnBlur && this.inputViewChild.nativeElement.value) {
this.addItem(event, this.inputViewChild.nativeElement.value);
this.inputViewChild.nativeElement.value = '';
}
this.onModelTouched();
this.onBlur.emit(event);
Expand All @@ -158,11 +165,12 @@ export class Chips implements AfterContentInit,ControlValueAccessor {
originalEvent: event,
value: removedItem
});
this.updateMaxedOut();
}

addItem(event: Event, item: string): void {
this.value = this.value||[];
if(item && item.trim().length && (!this.max||this.max > item.length)) {
if(item && item.trim().length) {
if(this.allowDuplicate || this.value.indexOf(item) === -1) {
this.value = [...this.value, item];
this.onModelChange(this.value);
Expand All @@ -171,14 +179,15 @@ export class Chips implements AfterContentInit,ControlValueAccessor {
value: item
});
}
}
}
this.updateMaxedOut();
}

onKeydown(event: KeyboardEvent, inputEL: HTMLInputElement): void {
onKeydown(event: KeyboardEvent): void {
switch(event.which) {
//backspace
case 8:
if(inputEL.value.length === 0 && this.value && this.value.length > 0) {
if(this.inputViewChild.nativeElement.value.length === 0 && this.value && this.value.length > 0) {
this.value = [...this.value];
let removedItem = this.value.pop();
this.onModelChange(this.value);
Expand All @@ -191,16 +200,16 @@ export class Chips implements AfterContentInit,ControlValueAccessor {

//enter
case 13:
this.addItem(event, inputEL.value);
inputEL.value = '';
this.addItem(event, this.inputViewChild.nativeElement.value);
this.inputViewChild.nativeElement.value = '';

event.preventDefault();
break;

case 9:
if(this.addOnTab && inputEL.value !== '') {
this.addItem(event, inputEL.value);
inputEL.value = '';
if(this.addOnTab && this.inputViewChild.nativeElement.value !== '') {
this.addItem(event, this.inputViewChild.nativeElement.value);
this.inputViewChild.nativeElement.value = '';

event.preventDefault();
}
Expand All @@ -214,8 +223,13 @@ export class Chips implements AfterContentInit,ControlValueAccessor {
}
}

get maxedOut(): boolean {
return this.max && this.value && this.max === this.value.length;
updateMaxedOut() {
if(this.inputViewChild && this.inputViewChild.nativeElement) {
if(this.max && this.value && this.max === this.value.length)
this.inputViewChild.nativeElement.disabled = true;
else
this.inputViewChild.nativeElement.disabled = false;
}
}
}

Expand Down

0 comments on commit 7464016

Please sign in to comment.