valor-software/ng2-select

Select breaks the whole browser when clicked.

joaovictortinoco opened this issue · 1 comments

I'm facing a terrible issue.

When i click on the component, my application stops completely, giving me a "Page Unresponsive" problem. Nothing seems to be wrong in my terminal or even on the inspect...

Check my code:

<ng-select [allowClear]="true"
            [items]="items"
            placeholder="No color selected"></ng-select>
const COLORS = [
  {'name': 'Blue 10', 'hex': '#C0E6FF'},
  {'name': 'Blue 20', 'hex': '#7CC7FF'}
];

@Component({
  selector: 'app-post',
  templateUrl: './post.component.html',
  styles: [`colorbox,.colorbox { display:inline-block; height:14px; width:14px;margin-right:4px; border:1px solid #000;}`],
  encapsulation: ViewEncapsulation.None
})

export class PostComponent implements OnInit {

  private value:any = {};
  private _disabledV:string = '0';
  private disabled:boolean = false;
  private items:Array<any> = [];

  constructor(private location: Location){}

  public ngOnInit():any {
    COLORS.forEach((color:{name:string, hex:string}) => {
      this.items.push({
        id: color.hex,
        text: `<colorbox style='background-color:${color.hex};'></colorbox>${color.name} (${color.hex})`
      });
    });
  }

  private get disabledV():string {
    return this._disabledV;
  }

  private set disabledV(value:string) {
    this._disabledV = value;
    this.disabled = this._disabledV === '1';
  }

  public selected(value:any):void {
    console.log('Selected value is: ', value);
  }

  public refreshValue(value:any):void {
    this.value = value;
  }

  onBackButton(){
    this.location.back();
  }

}

Same issue here. The component seems to hog the CPU.