bug: ion-item-options added async are not shown

[jongbonga]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x

Current Behavior

In a list of multiple ion-item-slidings, when an ion-item-sliding with conditioned options is revealed, the item does not slide on the conditioned option side.

Expected Behavior

The options should be able to respect the conditions when there is more than one ion-item-sliding in a list

Steps to Reproduce

1. Have a list with 2 or more ion-item-sliding with options
2. Trigger a condition from 1 on one of the slider options that will reveal other ion-item-slidings from that list
3. Try to slide the newly revealed ion-item-sliding

Code Reproduction URL

https://github.com/jongbonga/ion-item-sliding-issue

Ionic Info

Ionic:

   Ionic CLI                     : 6.20.9 
   Ionic Framework               : not installed
   @angular-devkit/build-angular : 16.1.6
   @angular-devkit/schematics    : 16.1.6
   @angular/cli                  : 16.1.6
   @ionic/angular-toolkit        : 9.0.0

Capacitor:

   Capacitor CLI      : 5.2.2
   @capacitor/android : not installed
   @capacitor/core    : 5.2.2
   @capacitor/ios     : not installed

Utility:

   cordova-res : 0.15.4
   native-run  : 1.7.2

System:

   NodeJS : v16.14.0 
   npm    : 8.3.1
   OS     : macOS Unknown

Additional Information

I'm on the latest ionic v7.2.1

[liamdebeasi]

Thanks for the report. The problem here is the start ion-item-options has an *ngIf which causes the component to be added after the end ion-item-options component is added to the DOM.

While we do watch for new instances of ion-item-option, this listener is added too late: https://github.com/ionic-team/ionic-framework/blob/0c117cfe7f383b7c7837d27de5a6eee12ddd6c2f/core/src/components/item-sliding/item-sliding.tsx#L79-L83

When await this.updateOptions is called, the start component has not been added to the DOM. This function is asynchronous, so by the time the function returns and the MutationObserver is setup the start component has already been added to the DOM, so we missed it.

[liamdebeasi]

Here is a dev build with a proposed fix if you are interested in testing:

npm install @ionic/angular@7.2.2-dev.11690983626.19a2a8cb

[jongbonga]

Here is a dev build with a proposed fix if you are interested in testing:

npm install @ionic/angular@7.2.2-dev.11690983626.19a2a8cb

Thank you

[jongbonga]

@liamdebeasi looks like it did the trick, working fine. Thank you

[liamdebeasi]

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

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.