bug: item-sliding requires multiple interactions when trying to open another item

Ionic version: [] 4.x [x] 5.x

I’m submitting a … [x] bug report [ ] feature request

Current behavior: I used <ion-item-sliding> to achieve the function that user can dragged my ion-item to reveal the buttons. Now the behavior is that when I have opened one row to reveal the hidden buttons, and I continue to try open another one without closing the previous one. The first one is auto closed, but the second row is not open as expected. I need to drag again the second row to reveal the buttons.

Expected behavior: The expected behavior should be that when I opened one row, I can drag another row to let first row auto close and open the new row simultaneously.

Related code:

–>

<div class="fund-box" *ngFor="let fund of funds ;let i=index"">
  <ion-item-sliding (ionDrag)="changeSliderIcon($event)" #slidingItem>
    <ion-item class="ion-no-margin ion-no-padding content-box" lines="none">
      <span class="rank rank{{i+1}}">{{i+1}}</span>
      <div class="remark-box">
        <div class="remark checked">{{fund.remark}}</div>
        <div class="tip">{{fund.remark_tip}}</div>
      </div>
      <div class="count-box left-slide">
        <div class="count">{{fund.count}}<span class="percent">%</span></div>
        <div class="tip">{{fund.count_tip}}</div>
      </div>
    </ion-item>
    <ion-item-options class="ion-align-items-stretch operation-box" lines="none">
      <div>
        <img src="/assets/images/home/love.png" class="love" (click)="onClickFavorite($event,slidingItem)"/>
      </div>
      <div class="setting" (click)="onClickSetting($event,slidingItem)" >{{fund.setting1}}<br>{{fund.setting2}}</div>
      <div class="buy" (click)="onClickBuy($event,slidingItem)" >{{fund.buy}}</div>
    </ion-item-options>
  </ion-item-sliding>
</div>

Ionic info:

Ionic:

   Ionic CLI                     : 6.10.0 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.1.1
   @angular-devkit/build-angular : 0.901.8
   @angular-devkit/schematics    : 9.1.8
   @angular/cli                  : 9.1.8
   @ionic/angular-toolkit        : 2.2.0

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : not available
   Cordova Plugins   : not available

Utility:

   cordova-res : not installed
   native-run  : 1.0.0

System:

   ios-deploy : 1.10.0
   ios-sim    : 8.0.2
   NodeJS     : v10.15.1 (/usr/local/bin/node)
   npm        : 6.4.1
   OS         : macOS Catalina
   Xcode      : Xcode 11.4 Build version 11E146

[g9276012]

Hi, here is a sample with gif.

https://github.com/g9276012/ionic-5-item-sliding-problem

At home page the item can’t be slide to open before the first item closed. but at work page the item can slide to open with the first item closing at same time.

[liamdebeasi]

Thanks for the issue. This has been resolved via https://github.com/ionic-team/ionic-framework/pull/23683, and a fix will be available in an upcoming release of Ionic Framework.