Error in stretchable-header initialization breaks super-tabs repositioning about ionic4-hidenav

[heidji]

i will look at it, thanks

[heidji]

i didn't have much time to dive too deep into it, could you please check if the problem still persists with the new version?

[rastafan]

@heidji thanks for your work on this.
We tried with the new version. Unfortunately, we are still getting an error, event though it's a different one.

ERROR TypeError: Cannot read property 'scrollTop' of undefined
    at HidenavShService.resetContent (ionic4-hidenav.js:1050)
    at SafeSubscriber._next (ionic4-hidenav.js:1521)
    at SafeSubscriber.__tryOrUnsub (Subscriber.js:183)
    at SafeSubscriber.next (Subscriber.js:122)
    at Subscriber._next (Subscriber.js:72)
    at Subscriber.next (Subscriber.js:49)
    at HTMLElement.handler (fromEvent.js:20)
    at ZoneDelegate.invokeTask (zone-evergreen.js:391)
    at Object.onInvokeTask (core.js:34182)
    at ZoneDelegate.invokeTask (zone-evergreen.js:390)

It happens most of the time, but not always. It still looks like some sort of race condition, but we might be wrong.

Feel free to ask for more details and tests if needed.
Thank you.

[heidji]

does it break anything tho?

…

On Wed, Feb 5, 2020 at 7:35 AM rastafan ***@***.***> wrote: @heidji <https://github.com/heidji> thanks for your work on this. We tried with the new version. Unfortunately, we are still getting an error, event though it's a different one. ERROR TypeError: Cannot read property 'scrollTop' of undefined at HidenavShService.resetContent (ionic4-hidenav.js:1050) at SafeSubscriber._next (ionic4-hidenav.js:1521) at SafeSubscriber.__tryOrUnsub (Subscriber.js:183) at SafeSubscriber.next (Subscriber.js:122) at Subscriber._next (Subscriber.js:72) at Subscriber.next (Subscriber.js:49) at HTMLElement.handler (fromEvent.js:20) at ZoneDelegate.invokeTask (zone-evergreen.js:391) at Object.onInvokeTask (core.js:34182) at ZoneDelegate.invokeTask (zone-evergreen.js:390) It happens most of the time, but not always. It still looks like some sort of race condition, but we might be wrong. Feel free to ask for more details and tests if needed. Thank you. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#6?email_source=notifications&email_token=AFUGDBCL735NARCL5RMO2YDRBK6C3A5CNFSM4KH4TZT2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEK3N45I#issuecomment-582409845>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AFUGDBF5QGUMELRYSG6PUITRBK6C3ANCNFSM4KH4TZTQ> .

[rastafan]

Yes, the inner content of the super-tabs is not correctly placed on tab change.
After changing tab with a shrunk header, the content of the destination tab appears as if the header was not shrunk, but then it gets in place correctly after touching/scrolling it.
When the error reported is not shown, the content appears correctly placed.
It is the same behaviour showed in the gif of the original post, after the error is thrown.

(This is a screenshot of the original problem in the example project, haven't tried the example project yet)

[heidji]

That's weird, I haven't gotten this error at all. have to check later.

…

On Wed, Feb 5, 2020 at 12:06 PM rastafan ***@***.***> wrote: Yes, the inner content of the super-tabs is not correctly placed on tab change. After changing tab with a shrunk header, the content of the destination tab appears as if the header was not shrunk, but then it gets in place correctly after touching/scrolling it. When the error reported is not shown, the content appears correctly placed. It is the same behaviour showed in the gif of the original post, after the error is thrown. [image: This is a screenshot of the original problem in the example project] <https://user-images.githubusercontent.com/7632849/73869463-969ef100-484a-11ea-87df-7dfe7c20b9b7.png> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#6?email_source=notifications&email_token=AFUGDBAMLY3ZBVSJT7F5ONLRBL53VA5CNFSM4KH4TZT2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEK4M6MQ#issuecomment-582537010>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AFUGDBFS7YNWFQNQ75GKQ6DRBL53VANCNFSM4KH4TZTQ> .

[rastafan]

Hi @heidji, any news on this issue?

[heidji]

I honestly could not reproduce that, how exactly does it happen?

[rastafan]

Ok, the error is gone. It was my fault.

The problem was a caused by having a ViewChild pointing at SuperTabs with "static" set to "true" :

@ViewChild('supertabs', { static: true }) supertabs: SuperTabs;

and then, a reference to the variable "supertabs" in constructor (which did not give any error as long as static was true).

Setting "static" to "false" and moving the reference to IonViewWillEnter solved the issue.

Just a last question before closing:

Supertabs content appears to be extra-long compared to the content of each tab, with a lot of white space at the bottom. Do you happen to know what it may be related to?

Thanks a lot again for your help.

[heidji]

I may know why, I do add some spacing at the bottom, i believe by inserting an empty div, just to make sure you can stretch (via scrolling ofc) if the page is too short. naturally, if the content isn't long enough, the page won't scroll at all, thus makes it impossible to stretch the header. it shouldn't add itself though if the content is long enough. it is possible that at the time of initiation, your content isn't long enough, so the program inserts this empty div, but sure it makes no sense if the page gets longer after. sadly i never made a check for that, but I could in the future. in the meantime, please find that div and make it shorter :D

…

On Fri, Feb 21, 2020 at 4:02 PM rastafan ***@***.***> wrote: Ok, the error is gone. It was my fault. The problem was a caused by having a ViewChild pointing at SuperTabs with "static" set to "true" : @ViewChild('supertabs', { static: true }) supertabs: SuperTabs; and then, a reference to the variable "supertabs" in constructor (which did not give any error as long as static was true). Setting "static" to "false" and moving the reference to IonViewWillEnter solved the issue. Just a last question before closing: Supertabs content appears to be extra-long compared to the content of each tab, with a lot of white space at the bottom. Do you happen to know what it may be related to? Thanks a lot again for your help. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#6?email_source=notifications&email_token=AFUGDBH24YTWOLDNT744ONLREBFPHA5CNFSM4KH4TZT2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEMUHZCA#issuecomment-589855880>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AFUGDBBIIX34BTQ5ZJPJJ7TREBFPHANCNFSM4KH4TZTQ> .

[rastafan]

I see, didn't check through enough it seems, sorry.
We'll manage to make it shorter somehow. I think i can close thi issue now.
Thanks again for your support. Great job so far!

[rastafan]

Just a little update: turns out the main problem was a tab change call before the component was completely initialized. I avoided it and everything seems to be alright.

[heidji]

Yes, this you shouldn't do in any case :D

…

On Mon, Feb 24, 2020 at 4:56 PM rastafan ***@***.***> wrote: Just a little update: turns out the main problem was a tab change call before the component was completely initialized. I avoided it and everything seems to be alright. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#6?email_source=notifications&email_token=AFUGDBD3ZUEZEW7KATA4V73RERGCDA5CNFSM4KH4TZT2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEMZ3JMA#issuecomment-590591152>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AFUGDBEY7QYDV5DYKHTPCCTRERGCDANCNFSM4KH4TZTQ> .