how to make the new component popup a list of option when the first click on the new component?

My source is resided in here.

I have an input box, I put many features to the input box (the left one).

I want to pack it into a component (the right one).

Lucky the new component working properly except the first click response.

The original input box will popup a list of option when the first click of the input box.

However, the new component does not popup a list of option when the first click of the component,

the component will popup a list of option after the first click or when a key is pressed.

How can I fix the problem?

Solution

Your problem is with life-cycle hooks. When you assign this.filteredDivisionList = this.divisionList; in the component constructor, the this.divisionList is undefined or null, use ngOnChnages() lifecycle hook to assigne input() values, because this method:

Respond when Angular (re)sets data-bound input properties. The method receives a SimpleChanges object of current and previous property values. Called before ngOnInit() and whenever one or more data-bound input properties change.''