title: Ion-item-option button needs to be clicked twice
body: <p>I have an ion-list with sliding items in it and create these with a for loop.
  You can click on the item itself and the router navigates to another page. When you slide an item, a button is revealed. and this Button needs to be clicked twice (at 90% of the time) to fire.</p>
  
  <p>I already tried:</p>
  
  <p>(click) in the <code>&lt;ion-item&gt;</code> and the <code>&lt;ion-avatar&gt;</code> tags. Same behaviour :(
  I'm letting the user create an item and it's added to a list. this list ist stored in ionic storage with this.storage.set('list');
  and the ion-list is created from this list above. so far so good this doesn't cause any problems.
  and the number of list items doesn't affect the behaviour either.
  the ion-list is in a <code>&lt;div *ngIf = "loaded"&gt;</code> and loaded is set false later in <code>deleteHorse()</code> so this shouldn't affect anything.
  when i click on the ion-item itself, it behaves correctly.
  could it be that the item covers the ion-item-options and thus, the second click is realised as a click on the actual button and not the item?
  I tried to add a hard coded item with sliding options - same thing...</p>
  
  <p>and reported it to ionic on <a href="https://github.com/ionic-team/ionic/issues/19564" rel="nofollow noreferrer">github</a></p>
  
  <pre><code>&lt;div *ngIf="loaded"&gt;
  &lt;ion-list *ngFor="let item of items; let i = index" routerDirection="forward"&gt;
        &lt;ion-item-sliding #slidingItem (click)="dosomething()"&gt;
          &lt;ion-item &gt;
          &lt;ion-avatar&gt;
            &lt;img [src]=items[0].imgUrl&gt;
          &lt;/ion-avatar&gt;
          &lt;h2&gt;{{item[0].name}}&lt;/h2&gt;
        &lt;/ion-item&gt;
        &lt;ion-item-options side="end"&gt;
            &lt;ion-item-option (click)="showSureAlert(i, slidingItem)"&gt;
              &lt;ion-button class="slideButton" &gt;
                &lt;ion-icon name="trash"&gt;&lt;/ion-icon&gt;
              &lt;/ion-button&gt;
            &lt;/ion-item-option&gt;
          &lt;/ion-item-options&gt;
        &lt;/ion-item-sliding&gt;
      &lt;/ion-list&gt;
  &lt;/div&gt;
  </code></pre>
  
  <pre><code>async showSureAlert(index, item) {
      console.log('clicked');
      const text: any = [];
      const alert = await this.alertCtrl.create({
        header: text.header = this.translateService.instant('delete'),
        message: text.message = this.translateService.instant('Warning.deleteHorse') + ' ' + this.horses[index][0].name + '?',
        buttons: [
          {
            text: text.next = this.translateService.instant('no'),
            handler: () =&gt; {
  
            }
          },
          {
            text: text.next = this.translateService.instant('yes'),
            handler: () =&gt; {
              // delete horsename
              this.deleteHorse(index);
            }
          }
        ],
        backdropDismiss: false
      });
      console.log('alert created');
      await alert.present();
      item.close();
    }
  
  
  </code></pre>
  
  <p>The <code>console.log()</code> is also affected by this.</p>
  
  <p>I would really like to use this but if there is no solution, I have to find another thing...
  thanks in advance for your help.</p>
  
  <p><strong>edit</strong></p>
  
  <p>I copied the code from <a href="https://ionicframework.com/docs/api/item-sliding" rel="nofollow noreferrer">ionicframework.com</a>
  -> same result</p>
  
  <p>And adapted my code to this example. 
  Changing the position of the item-options (from end to start) made it a bit better(70% of the time it needs to be clicked twice)</p>
  
  <p>have a look here: <a href="https://github.com/Sunny41/example.git" rel="nofollow noreferrer">example on github</a></p>