bug: IonSlides not updating with listeners until another action occurs. Andoid

[TylerHamm]

Bug Report

Ionic version:

[x] 5.2.7

Current behavior:

Imagine most house hunting applications. You have a map in the background, when you select a marker, a slide appears that shows detailed information. I am using sliders for this purpose. if you touch the map a variable is changed that causes CSS to change and make the slides move down. Sadly the variable changes but the CSS does not change. If i then try to swip to another slide, the CSS changes (like another change needed to happen for the CSS to take effect). This works on ionic cordova run web but not my android (old and running lollipop which is still ~9% of user base).

This also happens with marker click listeners that involve changing the sliders CSS. A note on this is that all the map stuff is working, its just the slider CSS.

The strangest thing is that I can change the "on" map.on listener to be just be a "one", Map.once and it works. sadly my working code for this is just reattaching listeners every time listener is used.. which i imagine is awful lol I am guessing this has to do with changing it from a subscribe to a then.

Last thing i wanted to add, is that this exact code works if i change to using AGM where i dont need to use the listeners like this.

Expected behavior:

When I click on the map, the slides CSS should change and move downward.

Steps to reproduce:

To reproduce all i have is a map with the sliders on top of it. From there I have a listener "map.on" for GoogleMapsEvent.MAP_CLICK and GoogleMapsEvent.MARKER_CLICK.

Related code:

<ion-content class="home">
    <div #map style="height: 100%;" id="map"></div>
    <ion-slides #slides [options]="sliderConfig" [class.popUp]="sliderVisible" (ionSlideDidChange)="slideChanged()">
        <ion-slide *ngFor="let marker of mapMarkers | async">
            <ion-card>
                <ion-card-content>
                    <h1>{{marker.title}}</h1>
                    <h3>{{marker.description}}</h3>
                </ion-card-content>
            </ion-card>
        </ion-slide>
    </ion-slides>
</ion-content>

    this.map.on(GoogleMapsEvent.MAP_CLICK).then(() => {
      this.mapClick()
    });

  mapClick() {
    console.log("mapClick" + this.map)
    this.sliderVisible = false;
  }

ion-slides.popUp {
    transform: translateY(0);
}

Other information:

Ionic info:

PS C:\Users\tyham\OneDrive\Documents\GitHub\AllForOne> ionic info

Ionic:

   Ionic CLI                     : 5.2.7 (C:\Users\tyham\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.4.0
   @angular-devkit/build-angular : 0.13.9
   @angular-devkit/schematics    : 7.3.9
   @angular/cli                  : 7.3.9
   @ionic/angular-toolkit        : 1.5.1

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 8.0.0, browser 6.0.0, ios 5.0.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.0.1, (and 8 other plugins)

Utility:

   cordova-res : not installed
   native-run  : 0.2.8

System:

   NodeJS : v10.15.3 (D:\Program Files (x86)\nodejs\node.exe)
   npm    : 6.4.1
   OS     : Windows 10

[liamdebeasi]

Thanks for the issue!

Starting with Ionic 5.7.0, we deprecated ion-slides in favor of having developers install Swiper.js directly in their projects. This gives developers access to new features, an improved developer experience, and bug fixes that they did not have access to when using ion-slides.

Since ion-slides uses Swiper.js under the hood, this migration should allow the functionality of your slides to remain exactly the same.

As a result of this deprecation, we have suspended any new development on ion-slides with the exception of critical fixes, such as resolving security issues.

I am going to close this issue out, but we strongly encourage you to try out the latest version of Swiper.js in your project. We have found that upgrading to the latest version of Swiper.js resolved a large number of common problems that Ionic developers were running into.

Please see https://ionicframework.com/docs/api/slides for more information on this change as well as a step by step migration guide for your apps. Developers will have approximately 1 year to migrate, starting from the initial deprecation in September 2021.

I understand this may not be the immediate resolution you were hoping for, but we think this change will significantly improve the developer experience in the long run by placing control of slides back in the hands of the developers.

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