Ion-select overrides button in ion-item

Ionic Framework ionic-v3
1

When there is an ion-select in an ion-item, (tap) on a button that is in the same ion-item does not work.

For example:

<ion-item>
    <button ion-button item-start (tap)="doSomething()" icon-only clear>
        <ion-icon name="information-circle"></ion-icon>
    </button>
    <ion-label>Some Label for a Select</ion-label>
    <ion-select [(ngModel)]="someProperty">
        <ion-option>
            Option 1
        </ion-option>
        <ion-option>
            Option 2
        </ion-option>
    </ion-select>
</ion-item>

When tapping the button, it actually triggers the Select Option Dialog.

Does anyone know how to work around this?

2

Maybe there’s a better way to do this, but you can try this solution:

<ion-row>
    <ion-col col-2>
      <button ion-button item-start (click)="doSomething()" icon-only clear>
        <ion-icon name="information-circle"></ion-icon>
    </button>
    </ion-col>
    <ion-col col-10>
      <ion-item>
        <ion-label>Some Label for a Select</ion-label>
        <ion-select [(ngModel)]="someProperty">
          <ion-option>
            Option 1
          </ion-option>
          <ion-option>
            Option 2
          </ion-option>
        </ion-select>
      </ion-item>
    </ion-col>
  </ion-row>
3

Thanks Hugo… Hehe I was hoping to avoid this option, but it’ll have to do for now!

Seems strange that select overrides the button, but other components don’t. Is this intentional?