Ion-select tag edit triggered/grabs focus on clicking anywhere in the form

Ionic Framework ionic-v3
1

Ionic 2.1.18 - v2 app - ang2 typescript.

I have a simple data entry form as shown below. I find that when i add a ion-select tag, it behaves in a focus-greedy manner. If I click on the datetime picker or the textarea, the ion-select alert popups up - with the options listed.

I replaced the ion-select with an ion-input type=“text” and the behavior is not seen anymore. No custom css exists.

<ion-header>
</ion-header>


<ion-content padding>
<ion-segment [(ngModel)]="type">
</ion-segment>

<div>
    <ion-label color="primary" stacked>Date</ion-label>

    <ion-datetime ..>
    <ion-label color="primary" stacked>Description</ion-label>
    <ion-textarea ...>

    <ion-label color="primary" stacked>Category</ion-label>
    <!-- this works but the ion-select below doesn't <ion-input type="text" [(ngModel)]="transaction.category"></ion-input>-->
    <ion-select [(ngModel)]="transaction.category">
    <ion-option>food</ion-option>
    <ion-option>junk food</ion-option>
    </ion-select>
    <ion-label color="primary" stacked>Amount</ion-label>
    <ion-input type="number" ..></ion-input>

    <button ion-button color="primary" block>Add</button>
</div>
</ion-content>
2

Try to enclose labels and their corresponding inputs in a separate ion-item, since some events on inputs and labels within the same container are linked (forgive me to be not technical enough).

<ion-list no-lines>

    <ion-item>
        <ion-label color="primary" stacked>Date</ion-label>
        <ion-datetime ..>
    </ion-item>

    <ion-item>
        <ion-label color="primary" stacked>Description</ion-label>
        <ion-textarea ...>
    </ion-item>

    <ion-item>
        <ion-label color="primary" stacked>Category</ion-label>
        <ion-select [(ngModel)]="transaction.category">
            <ion-option>food</ion-option>
            <ion-option>junk food</ion-option>
        </ion-select>
    </ion-item>

    <ion-item>
        <ion-label color="primary" stacked>Amount</ion-label>
        <ion-input type="number" ..></ion-input>
    </ion-item>

    <ion-item>
        <button ion-button color="primary" block>Add</button>
    </ion-item>

</ion-list>