Ionic v4 <ion-toggle> and <ion-select> in the same <ion-item> issue: <ion-toggle> untoggleable because click coverage is overlapped by <ion-select>

Ionic Framework
1

I want to be able to click on a toggle in the same line, to save space, as an ion-select. Not sure if this is feasible, but it would be nice.

The problem: when I click on the ion-toggle, it instead triggers the ion-select

<ion-item>
      <slot><ion-label slot='start'><h6>Sort by...</h6></ion-label></slot>
      <slot name='item-left'><ion-toggle (ionChange)='updateOrderText()' checked='true' [(ngModel)]='isAscending'>{{order_text}}</ion-toggle></slot>
      <slot name='item-right'><ion-select [interfaceOptions]="customSortOptions" interface="popover" text-wrap (ionChange)='doSort()' [(ngModel)]="sort_option">
      <ion-select-option text-wrap value="0">
              alphabet
      </ion-select-option>
      <ion-select-option text-wrap value='1'>
           activeness
      </ion-select-option>
      <ion-select-option text-wrap value='2'>
            distance
     </ion-select-option>
     </ion-select>
   </slot>
</ion-item>