fix(item): sliding item should not close when clicking an option button

fixes #8481

Author: manucorporat

src/components/item/item-sliding-gesture.ts

@@ -73,7 +73,9 @@ export class ItemSlidingGesture extends PanGesture {
   }
 
   notCaptured(ev: any) {
-    this.closeOpened();
+    if (!clickedOptionButton(ev)) {
+      this.closeOpened();
+    }
   }
 
   closeOpened(): boolean {
@@ -99,9 +101,14 @@ export class ItemSlidingGesture extends PanGesture {
 }
 
 function getContainer(ev: any): ItemSliding {
-  let ele = ev.target.closest('ion-item-sliding', true);
+  let ele = ev.target.closest('ion-item-sliding');
   if (ele) {
     return (<any>ele)['$ionComponent'];
   }
   return null;
 }
+
+function clickedOptionButton(ev: any): boolean {
+  let ele = ev.target.closest('ion-item-options>button');
+  return !!ele;
+}

src/components/item/test/sliding/app-module.ts

@@ -39,6 +39,10 @@ export class E2EPage {
     this.list.closeSlidingItems();
   }
 
+  noclose(item: ItemSliding) {
+    console.log('no close', item);
+  }
+
   unread(item: ItemSliding) {
     if (item) {
       item.close();

src/components/item/test/sliding/main.html

@@ -31,8 +31,8 @@ <h2>HubStruck Notifications</h2>
       </a>
 
       <ion-item-options side="left">
-        <button ion-button icon-only (click)="unread(item100)">
-          <ion-icon name="mail"></ion-icon>
+        <button ion-button icon-only (click)="noclose(item100)">
+          No close
         </button>
       </ion-item-options>
       <ion-item-options side="right">