valor-software / ng2-select

Angular based replacement for select boxes
http://valor-software.github.io/ng2-select/
MIT License
676 stars 588 forks source link

Select breaks the whole browser when clicked. #952

Open joaovictortinoco opened 6 years ago

joaovictortinoco commented 6 years ago

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();
  }

}
adammendoza commented 5 years ago

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