bug: Sliding does not work in an ion-item-sliding component if an *ngIf used on the ion-item-options

[adwilson]

Prerequisites

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

Ionic Framework Version

v7.x

Current Behavior

We are using the <ion-item-sliding> component in our app. The sliding is only used selectively based on a condition which we achieved by adding an *ngIf to the <ion-item-options> component. In v6 and below this behaviour worked fine. Those where the condition did not match were still, non-moving items, those that did would slide with the sliding gesture.

Since v7, this is no longer the case. Any presence of the *ngIf removes the ability to slide any item even if it meets the condition.

Expected Behavior

Expected it to work as it did in v6 where it would allow sliding where the condition was met. There is no mention of any changes to the sliding components in any of the changelogs.

Steps to Reproduce

Taken from the provided StackBlitz URL...

<ion-list>
  <ion-item-sliding *ngFor="let animal of animals">
    <ion-item>{{ animal }}</ion-item>
    <!--
      The sliding does not work on any item when the *ngIf is present below, remove it and it works fine.
    -->
    <ion-item-options side="end" *ngIf="animal === 'Dog'">
      <ion-item-option>It's a dog</ion-item-option>
    </ion-item-options>
  </ion-item-sliding>
</ion-list>

Then observe from the preview window how the sliding does not work on any item until the *ngIf is removed.

Code Reproduction URL

https://stackblitz.com/edit/angular-bsbwpu

Ionic Info

Ionic:

Ionic CLI : 7.0.1
Ionic Framework : @ionic/angular 7.0.2
@angular-devkit/build-angular : 15.1.1
@angular-devkit/schematics : 14.1.2
@angular/cli : 15.1.1
@ionic/angular-toolkit : 7.0.0

Capacitor:

Capacitor CLI : 4.0.1
@capacitor/android : 4.0.1
@capacitor/core : 4.0.1
@capacitor/ios : 4.0.1

Utility:

cordova-res : 0.15.4
native-run : 1.7.1

System:

NodeJS : v18.13.0 (C:\Program Files\nodejs\node.exe)
npm : 8.19.3
OS : Windows 10

Additional Information

No response

[amandaejohnston]

Thank you for the issue. I'm unable to replicate this; the Dog sliders work as intended. Screencast below. What browser are you testing on?

2023-04-21.09-06-11.mp4

[adwilson]

Hmm, I can swear that wasn't working before. The place we found the issue was within Electron and that is still the case. OK, I'll close this and see if I find what is really going on then. Thanks for your time.

[DmitrySharabin]

I face the same issue. I stumbled on it after upgrading to version 7. I haven't faced this issue previously. So it seems to me it might be a regression.

ScreenFlow.mp4

The flow in the screen recording corresponds to the following (simplified) code snippet. 👇
As you can see from the recording, if I visit the same root the second time in a row, everything starts working as it should. And it happens all over my code where I try to show/hide item options with *ngIf.

<ion-content [fullscreen]="true">
	<ng-container *ngIf="lawFirm$ | async as lawFirm; else loading">
		...
		<ion-list>
			...
			<ion-item-sliding *ngFor="let lawyer of lawFirm.lawyers">
				<ion-item-options side="start" *ngIf="lawFirm.isActive">
					<ion-item-option *ngIf="lawyer.isActive" >
						<ion-icon slot="icon-only" name="ban"></ion-icon>
					</ion-item-option>
					<ion-item-option *ngIf="!lawyer.isActive" >
						<ion-icon slot="icon-only" name="arrow-undo"></ion-icon>
					</ion-item-option>

					<ion-item-option>
						<ion-icon slot="icon-only" name="trash"></ion-icon>
					</ion-item-option>
				</ion-item-options>

				<ion-item>
					<ion-label>{{ lawyer }}</ion-label>
				</ion-item>

				<ion-item-options side="end" *ngIf="lawFirm.isActive && lawyer.isActive">
					<ion-item-option>
						<ion-icon slot="icon-only" name="pencil"></ion-icon>
					</ion-item-option>
				</ion-item-options>
			</ion-item-sliding>
		</ion-list>
	</ng-container>
</ion-content>

@amandaejohnston, could you please give this issue another look? 🙏🏻

[amandaejohnston]

@DmitrySharabin Could you post a link to a Stackblitz app or Github repo replicating the issue?

[adwilson]

I got this to replicate in the StackBlitz I provided... https://stackblitz.com/edit/angular-bsbwpu. What I did was surround the ion-list in an ion-content (I was just trying anything out!), saved the file. I removed the ion-content again, saved it and it stops working in the instant refresh. This might a quirk of how StackBlitz works in that doesn't do a full refresh. If you do a full refresh the slider works fine again. That explains why I was getting a reproduction and you didn't @amandaejohnston.

[tradingproject19]

I am also facing the same issue. For now, I have replaced *ngIf with [hidden] in ionic v7.

[amandaejohnston]

Is there a way to replicate the issue without going through Stackblitz's instant refresh behavior like that? And if so, could one of you post a link to a Stackblitz or Github repo that does so? While I'm able to replicate the issue following those steps, I want to ensure both that the root cause is in Ionic rather than Stackblitz, and that the fix down the road applies to a real world use case.

[adwilson]

@amandaejohnston Got it! Check my StackBlitz again. Sliding works on the original 2-item list but after the delay when the full list is "loaded" that only the first "Dog" works but the other two don't. It is as if it on;y loads the slider functionality on what is there at the time and doesn't adjust for new items.

In my Electron project I replaced the actual loading of the list, which is done asynchonrously from a local DB, and just created a dummy list that was available straightaway and it works.

[amandaejohnston]

Thank you! I'm able to replicate it consistently now. I just need to dig further into why exactly it's happening.

[DmitrySharabin]

If you need something synchronous to play with, I slightly changed @adwilson's testcase to illustrate the issue: https://stackblitz.com/edit/angular-5mxvej.

Please note that when we switch from Dogs to something else, we can still slide the “Dog” rows but the action button is hidden. 🤷🏻‍♂️

[amandaejohnston]

@DmitrySharabin I'm able to slide all the Dog sliders in your example, with the buttons appearing as expected. What browser are you testing on?

[DmitrySharabin]

@DmitrySharabin I'm able to slide all the Dog sliders in your example, with the buttons appearing as expected. What browser are you testing on?

Yes, after the app is launched, everything works as expected. But if you chose another animal from the drop-down above the list of animals (e.g., cat), you won’t be able to slide the corresponding slider (the Cat one).

[amandaejohnston]

Digging in further, it looks like this issue is, at the root, actually the same as #25578. So, I'm going to close this as a duplicate of that other issue. I'll post a link to the latest reproduction over there, since I think it's a cleaner demonstration of the bug than what we've already got.

[ionitron-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.