Skip to content

fix(core): Scroll listener register failure after unregister #10368

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Aug 25, 2023

Conversation

CatchABus
Copy link
Contributor

PR Checklist

What is the current behavior?

There is a case that ScrollView scroll event listeners fail to register if a removeEventListener call occurs prior.
e.g.

view.off('scroll', onScroll);
view.on('scroll', onScroll); // This won't work because of line above

This occurs mostly on iOS because we don't unset property _delegate when detaching delegate.
PR will take care of this and improve few other things for both platforms.

What is the new behavior?

Scroll listeners will register without problems.

@cla-bot cla-bot bot added the cla: yes label Aug 25, 2023
@NathanWalker NathanWalker merged commit e4fe276 into NativeScript:main Aug 25, 2023
@JWiseCoder
Copy link

JWiseCoder commented Nov 6, 2023

This fix seems to have broken the scroll event in our NS/Angular code, which is something similar to this:

 <ScrollView
        orientation="horizontal"
        scrollBarIndicatorVisible="false"
        (scroll)="onScroll($event)"
        *ngIf="someVariableToShowHideTheScrollView">

Basically, when updating to a NativeScript version that includes this fix, the onScroll function is never called. If I go back and copy the 8.5.9 index.ios.js in the core/ui/scroll-view folder of the nativescript node_modules, the scroll event fires like normal. Is this a bug, or is there something we're missing?

@CatchABus
Copy link
Contributor Author

This fix seems to have broken the scroll event in our NS/Angular code, which is something similar to this:

 <ScrollView
        orientation="horizontal"
        scrollBarIndicatorVisible="false"
        (scroll)="onScroll($event)"
        *ngIf="someVariableToShowHideTheScrollView">

Basically, when updating to a NativeScript version that includes this fix, the onScroll function is never called. If I go back and copy the 8.5.9 index.ios.js in the core/ui/scroll-view folder of the nativescript node_modules, the scroll event fires like normal. Is this a bug, or is there something we're missing?

Can you try to get rid of ngIf and check if scroll event is triggered?

@JWiseCoder
Copy link

No, I was already testing that, and getting rid of the ngIf did not change anything. The component this is a part of is used as a subcomponent, and I even went and removed all the ngIfs up the chain to make sure. No matter what, the scroll event is not triggering.

@CatchABus
Copy link
Contributor Author

No, I was already testing that, and getting rid of the ngIf did not change anything. The component this is a part of is used as a subcomponent, and I even went and removed all the ngIfs up the chain to make sure. No matter what, the scroll event is not triggering.

Please create an issue and add a reference to this PR. We'll take care as soon as possible.

@JWiseCoder
Copy link

I will. I'm trying to get more info on this issue. I can create a scroll view elsewhere, even with an ngIf hiding the scroll view initially, and that scroll event fires correctly. I was hoping it would be something simple, but it looks like there's some complication in here that hasn't been accounted for.

@JWiseCoder
Copy link

Okay, I've found the culprit. On our actual code, we were using a class to, among other things, add a background color that will change depending on the light/dark theme. If I remove the background color, the event fires normally. I was able to reproduce this using the following test code:

<ScrollView
    orientation="horizontal"
    style="background-color: black;"
    (scroll)="onScroll($event)"
>
    <StackLayout
        orientation="horizontal"
        [height]="200">
        <StackLayout width="100" backgroundColor="red"></StackLayout>
        <StackLayout width="100" backgroundColor="blue"></StackLayout>
        <StackLayout width="100" backgroundColor="green"></StackLayout>
        <StackLayout width="100" backgroundColor="yellow"></StackLayout>
    </StackLayout>
</ScrollView>

With the background color style in place, the scroll event does not fire. If I remove it, the scroll event fires normally.

@CatchABus
Copy link
Contributor Author

Okay, I've found the culprit. On our actual code, we were using a class to, among other things, add a background color that will change depending on the light/dark theme. If I remove the background color, the event fires normally. I was able to reproduce this using the following test code:

<ScrollView
    orientation="horizontal"
    style="background-color: black;"
    (scroll)="onScroll($event)"
>
    <StackLayout
        orientation="horizontal"
        [height]="200">
        <StackLayout width="100" backgroundColor="red"></StackLayout>
        <StackLayout width="100" backgroundColor="blue"></StackLayout>
        <StackLayout width="100" backgroundColor="green"></StackLayout>
        <StackLayout width="100" backgroundColor="yellow"></StackLayout>
    </StackLayout>
</ScrollView>

With the background color style in place, the scroll event does not fire. If I remove it, the scroll event fires normally.

I have a brief idea of what's happening, thanks for testing. Could you still create a new issue so I can justify the new PR?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants