NeckbreakerPascal commented 3 years ago

Bug Report

Ionic version:

[ ] 4.x [x] 5.x

Current behavior:

Since the last update of ionic angular I ran into this issue
Start of the App, Init Data for an ion-slider (data comes from an API via HTTP Request)
ion-content on Slider renders correct
use ion Refresh, which calls again data from the API
the slider calculates the height wrong and I do not see the whole content which got rendered before
Important: inside the slider is an div with an*ngFor and that array got updated via the Refresh

Expected behavior:

The content should still be visible when I use the ionRefresher

Steps to reproduce:

Create a page with a ion-slider and an ion-refresher
add some data into the area of the slider
add an ionRefresh method that update the data of the slider
I figure out, that the main problem got caused because I update the Array which is used for the *ngFor, but I am not sure if there is an alternate way
Before the update there was not that kind of issue
I tried a lot to come to the conclusion that it has to to with the array and how I update it, or could the changes on the ion-refresher causes this?

Related code:

Short Version:

<ion-content>
    <ion-refresher class="" slot="fixed" close-duration="500ms" snapback-duration="500ms"
                   (ionRefresh)="ionRefresh($event, this.tabIndex)">
        <ion-refresher-content
                class=""
                pullingIcon="arrow-dropdown"
                pullingText="Ziehen zum Aktualisieren..."
                refreshingSpinner="circles"
                refreshingText="">
        </ion-refresher-content>
    </ion-refresher>

  <ion-slides class="test-wrapper" #SwipedTabsSlider
              (ionSlidesDidLoad) = "onSliderInit($event)"
              (ionSlideTransitionEnd)="updateTabIndex($event)"
              (ionSlideWillChange) ="sendSlidePixelNews($event);scrollToTop($event);"
              [pager]="false"
              [options]="{autoHeight: true}">

      <ion-slide>
             <div *ngFor='let t of slideArray; let i = index '>
                      <!-- Output -->
             </div>
      </ion-slide>
          <!--   .... -->
      <ion-slide>

      </ion-slide>
          <!--   .... -->
      <ion-slide>
          <!--   .... -->
      </ion-slide>
  </ion-slides>
</ion-content>

  public ionRefresh(event, type) {
    if (typeof (type) === 'string') {
      type = parseInt(type, 2);
    }
    this.loadFromAPIConnector(type, true).then(data => {
      this.slideArray = data; // When I delete this, I do not get the error
    });
    setTimeout(() => {
      event.target.complete();
    }, 2000);
  }

Other information:

I tried via the swiper.ui to implement a function that updates the height of the slider, but it do not work as it should
Feels like angular has a problem with manipulating the used array in *ngFor
When I call the updateSwiperHeight in the timeOut() of doRefresh it works, but it is not a good solution because you can see in the app the not fully rendered content
Just as additional info.

// Slider is declared at the beginning with: necessary imports are there
  @ViewChild('SwipedTabsSliderNews') public SwipedTabsSlider: IonSlides;

// function to update Swiper height - https://swiperjs.com/swiper-api
  public updateSwiperHeight() {
    console.log('UpdateSwiperHeight');
    this.SwipedTabsSlider.getSwiper().then(swiper => {
      swiper.shortSwipes = false;
      swiper.update();
      swiper.updateAutoHeight(1);
      swiper.updateSize();
    });
  }

Ionic info:

Ionic:

   Ionic CLI                     : 6.12.4 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.5.4
   @angular-devkit/build-angular : 0.1101.4
   @angular-devkit/schematics    : 11.1.4
   @angular/cli                  : 11.1.4
   @ionic/angular-toolkit        : 3.0.0

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 8.1.0, ios 5.1.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 5.0.0, (and 30 other plugins)

Utility:

   cordova-res (update available: 0.15.3) : 0.15.2
   native-run (update available: 1.3.0)   : 1.0.0

System:

   ios-deploy : 1.10.0
   ios-sim    : 8.0.2
   NodeJS     : v14.15.4 (/usr/local/bin/node)
   npm        : 2.15.12
   OS         : macOS Big Sur
   Xcode      : Xcode 12.4 Build version 12D4e

NeckbreakerPascal commented 3 years ago

Short update on this one, not sure if it is maybe a related bug to ion-refresher, ion-slide in combination with the ngFor Directive.

Instead of this.slideArray = data; I manipulate the array in a different way.

this.slideArray = this.slideArray.concat(data);
this.slideArray = this.slideArray.slice(0, limit);

This if for sure a quick and dirty fix, but does its job for now.

liamdebeasi commented 3 years ago

If you were to do the following instead, does it fix the issue?

this.slideArray = [...data];

Many frameworks and tools have specific rules about how you should update reactive arrays and objects, which could be why this issue is happening.

NeckbreakerPascal commented 3 years ago

If you were to do the following instead, does it fix the issue?
this.slideArray = [...data];
Many frameworks and tools have specific rules about how you should update reactive arrays and objects, which could be why this issue is happening.

Hey there, thanks for the reply. then the slider is completely empty after the refresh.

liamdebeasi commented 3 years ago

Can you reproduce this in a blank Ionic starter app and provide a link to the repo?

NeckbreakerPascal commented 3 years ago

Can you reproduce this in a blank Ionic starter app and provide a link to the repo?

I tried, but I was not able because it has to do with those API-Requests. I load the Data from one of our servers. When I do it in a blank starter app it has to be something different.

I tried to reproduce with a promise and so on, but it did not work.

liamdebeasi commented 3 years ago

Can you send over the app you see the issue in?

NeckbreakerPascal commented 3 years ago

Can you send over the app you see the issue in?

Not at the moment. I already fixed it, and the app is not open for puplic. Maybe I can do some kind of a recast, when I undo my changes. Would that help you?

liamdebeasi commented 3 years ago

Without being able to reproduce the issue on my end it is hard to say whether or not this is a bug in Ionic Framework. Where you were able to resolve the issue via https://github.com/ionic-team/ionic-framework/issues/22962#issuecomment-785159502, maybe we can close the issue for now and revisit if it happens again?

NeckbreakerPascal commented 3 years ago

Without being able to reproduce the issue on my end it is hard to say whether or not this is a bug in Ionic Framework. Where you were able to resolve the issue via #22962 (comment), maybe we can close the issue for now and revisit if it happens again?

Sure thing, totally understand it. Good idea to close and only if it re-appears i will open.

Thanks for the help so far. #22962 (comment) solved it for me.

ionitron-bot[bot] commented 3 years ago

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.

ionic-team / ionic-framework

bug: ionSlider calculates height wrong after updating ion-content inside #22962

Bug Report