Ionic-framework: Ionic 4.6.0 Regressions

[brandyscarney]

Ionic 4.6.0 introduced some regressions due to the update to Stencil One. This issue is to track and resolve them for our hotfix release.

✔️ Issues that have been checked off have been resolved in Stencil or Ionic, but not yet released until 4.6.1 is out.

• [x] ion-infinite-scroll no longer firing ionInfinite event. Issue: https://github.com/ionic-team/ionic/issues/18632
• [x] ion-searchbar styling breaks when navigating to another page and then navigating back. Issue: https://github.com/ionic-team/ionic/issues/18642
• [x] Swipe to go back is broken
• [x] Overlay opts are now required, breaking some angular builds. Issue: https://github.com/ionic-team/ionic/issues/18631
• [x] white screen after updating. issue: https://github.com/ionic-team/ionic/issues/18649
• [x] ion-slide not working properly. Issue: https://github.com/ionic-team/ionic/issues/18633
• [x] scss files missing (add back to stencil config in Ionic): https://github.com/ionic-team/ionic/issues/18639
• [x] Disabled fab buttons no longer have opacity set https://github.com/ionic-team/ionic/issues/18682; PR https://github.com/ionic-team/ionic/pull/18685
• [x] Ionicons not loaded w/ baseHref: https://github.com/ionic-team/ionic/issues/18650 and https://github.com/ionic-team/ionic/issues/18637
• [x] target was removed from ion-router-link, PR https://github.com/ionic-team/ionic/pull/18659
• [x] Item is entirely disabled if checkbox is https://github.com/ionic-team/ionic/issues/18670
• [x] default tab not being selected https://github.com/ionic-team/ionic/issues/18689
• [x] content flashing when switching between tabs
• [x] cannot bind ion-icon name https://github.com/ionic-team/ionic/issues/18707

---

Reporting a Regression

If you are running into a bug that worked in 4.5.0 but is not working in 4.6.0 and is not in the list above please create a new issue:

• Fill out the provided template with steps for us to reproduce
• Provide the minimal amount of code needed to reproduce the issue in a starter
• Or provide a simple code repository that only highlights the bug

Please tag @ionic-team/framework on the issue to bring it to our attention.

[lincolnthree]

@brandyscarney I think I have another one. Haven't reproduced in a sample app yet, but <ion-img> does not reliably appear in 4.6.0 either. It's in the DOM but the image is never loaded (until the DOM is manually manipulated, height or width, etc, at which point it'll show up.) Working on condensing it into something reproducible.

[tanoabeleyra]

ion-tabs seems to be broken too, there's no tab selected on first load.

[UTSOURCE]

4.6.0 The configuration here seems to be no longer working

[liamdebeasi]

Hi @UTSOURCE and @tanoabeleyra,

Can you provide reproductions for these? I am not able to reproduce either.

Thanks!

[liamdebeasi]

Hi everyone,

We published a nightly build of Ionic with these fixes. You can install it using the latest dev tag.

For Angular users: npm i @ionic/angular@dev
For Stencil + Ionic users: npm i @ionic/core@dev

Any feedback from testing this build is greatly appreciated!
Thanks!

[positlabs]

What were the regressions? Can we build tests against them?

[tanoabeleyra]

Hi @UTSOURCE and @tanoabeleyra,

Can you provide reproductions for these? I am not able to reproduce either.

Thanks!

I opened an issue: #18689.
I'm going to test the nightly build as soon as possible.

[peterpeterparker]

@liamdebeasi I could confirm that #18632 aka the ionInfinite not fired issue is resolved, thx a lot 👍 (tested with core in a Stencil PWA)

[nerdic-coder]

I can confirm that "ion-slide not working properly. Issue: #18633" is resolved with the latest @ionic/core@dev

[ashinpaugh]

I've got a directive that I apply IonInput / IonTextAreas, the constructor of the directive receives an ElementRef. In v4.6.0 element.getInputElement returns an Object with two properties state and value. The value property holds the input element. After Reverting to v4.5.0 getInputElement returns the textarea or the input.

edit: cleared up my comment.

[petrot]

"ion-searchbar styling breaks" issue is resolved with the latest @ionic/core@dev!

Thank you!

[UTSOURCE]

@liamdebeasi
If you create a new 4.6.1 project or a 4.6.0 project, the configuration will be invalid.
Such as the following configuration

 IonicModule.forRoot({
            menuType: 'overlay',
            mode: 'ios',
            backButtonText: '',
            // swipeBackEnabled: false, 
            // _forceStatusbarPadding: true 
        }),

[liamdebeasi]

@UTSOURCE,

As I mentioned in my previous comment, I am unable to reproduce the issue you are describing using the code snippet you have provided. Please provide a full reproduction of the issue (a link to a GitHub repo would be fine), and we can take a look.

Thanks! 🙂

[simion]

The workaround from this comment https://github.com/ionic-team/ionic/issues/15953#issuecomment-430167830 does not work anymore. Content renders partially, and it's damn ugly.
I had to rollback :(

[brandyscarney]

If anyone is running into issues that worked in 4.5.0 but are not working in 4.6.0 or the latest dev build & not already in the original list please create a new issue and fill out the provided template with steps for us to reproduce. If we cannot reproduce the issue, we cannot fix it. Please help us by providing the minimal amount of code needed to reproduce the issue in a starter or a simple code repository that only highlights the bug. 🙂

Please tag @ionic-team/framework on the issue to bring it to our attention. I'd like to avoid back and forth comments here to reproduce issues since there are a lot of people subscribed to this issue.

Thank you!

[thiennm2905]

I use angular v7.1.2 and ionic v4.6
I code a base service, when I use http request, I create and present a Loading overlay, stop it by dismiss when finish by pipe(), it’s working on ionic v4.5, but in v4.6 it seem create more than one http request after one request finished when a change tab

[alaa-alshamy]

@brandyscarney
autoGrow directive also has a bug after 4.6.0 version, when enter characters in a textarea it's growing up but when remove them not shrinking back

[tmk1991]

I use a different infinite scroller than the ionic one but there are now issues with it in 4.6.0 that do not exist in 4.5.0.

1) Similar to #18632, the bottom event is not firing for my infinite scroller. I think this may be related to and it's inner scroll container
2) items seem to show for a brief second and then disappear when in the . These items are showing via *ngTemplateOutlet into the ion-content. Just bringing attention to this in case it's unrelated to #18632

I'll re-test the hotfix when released. If there continues to be a bunch of issues (aside from mine specifically), is there a possibility to back out stencil one from the ionic/angular package?

EDIT:

tried the latest dev kit and both issues still appear

Side note: the update from 4.4.0 to 4.4.1 brought some slower performance to items appearing and disappearing on the DOM. I'm thinking it's related to the angular change detection modifications made in 4.4.1. Not sure if that'll be resolved with the 4.6.X release. (should I make a separate issue for this specific side note issue?)

[brandyscarney]

Hi all, we released a new dev build which should fix every issue listed in the original issue above. Please try it out and let us know: 4.6.1-dev.201907052128.7953088

Please make separate issues for anything found not in the original list, thank you!

[brandyscarney]

Ionic 4.6.1 has been released, please update to this version if you are having any of the issues listed here: https://github.com/ionic-team/ionic/releases/tag/v4.6.1

I am going to close this since the original list is fixed, anyone having issues still please create a new issue, thank you!