Kind of figured it out. Its a bit odd, not sure if it was a bug or anything.
Yes, turns out my ion-button was not calling the openSelect function. If I put ion-button right above ion-select, upon clicking on the button, it will open the ion-select.
So I mistaken thought it had successfully called the openSelect(). Turns out, even if I take away the (click)=‘openSelect()’, it will still open the ion-select. In other words, it did not call the function yet still able to open the ion-select. Somehow by placing the button above ion-select, it automatically open the ion-select regardless, bypassing any function attached to it. So even if I attach the closeSelect(), it didnt invoke the function.
If i put the ion-button after ion-select, then everything works accordingly. Its a bit odd, not sure what to make of it.
<button ion-button (click)='openSelect()'>Open</button>
<ion-option value="f" selected>Female</ion-option>