Ion-item-sliding close() and open() disables options events

Ionic Framework
1

I’m porting an app from ionic 6/cordova to ionic 7/capacitor and something that used to work on the old app is not functioning in the new one.

The scenario is that I’m using an ion-list of ion-item-sliding and I want to be able to dynamically add extra options into an open sliding row.

When I add an option to the row, it appears OK, but the ion-item-sliding text may now fully/partially cover it. So to get around this, I programmatically close() and open() the ion-item-sliding and the options are now fully visible.

Only problem now is that they are no longer clickable and the sliding item itself can’t be manually closed.

I’ve recreated the issue in this app based on the blank example…

Slide the item open. Click on the button to add extra option. Options appears OK… but no events.

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">Blank</ion-title>
    </ion-toolbar>
  </ion-header>

  <div id="container">
    <ion-list>
      <ion-item-sliding #slider (ionDrag)="dragEvent($event, slider)">
        <ion-item>
          <ion-label>Line 1</ion-label>
        </ion-item>
    
        <ion-item-options>
          <ion-item-option (click)="doSomething()">Do Something</ion-item-option>
          <ion-item-option *ngIf="option2enabled" (click)="doNothing()">Do Nothing</ion-item-option>
        </ion-item-options>
      </ion-item-sliding>

    </ion-list> 
  
    <ion-button *ngIf="line1 !== undefined" (click)="addOption()">Add option</ion-button>
  </div>
</ion-content>

import { Component } from '@angular/core';
import { IonItemSliding } from '@ionic/angular';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  line1?: IonItemSliding 

  option2enabled: boolean = false

  constructor() {}

  doSomething() {
    console.log("doing something...")
    this.line1?.close()
  }

  doNothing() {
    console.log("doing nothing...")
  }

  dragEvent(event: any, slider: IonItemSliding) {
    this.line1 = slider
    console.log(JSON.stringify(event), slider)
  }

  addOption() {
    this.option2enabled = true
    this.line1?.close()
    this.line1?.open(undefined)
  }

}