Skip to content

StackLayout isUserInteractionEnabled="false" value is not working #3215

Closed
Closed
StackLayout isUserInteractionEnabled="false" value is not working#3215
Labels
bugos: androidseverity: medium
Milestone
2.5.0

Description

@MadhuSudhanBhaskar
MadhuSudhanBhaskar
opened on Nov 30, 2016

StackLayout isUserInteractionEnabled="false" value is not working

https://docs.nativescript.org/api-reference/classes/_ui_core_view_.view.html#isuserinteractionenabled
Yes I did verify on stackover flow and other channels

I am trying to disable use interaction when I have a activity indicator. Below code is stack layout example.

<Button text="Sign in" (tap) = "test()">
<ActivityIndicator style="color:red" [busy] = "isLoading" >

Which platform(s) does your issue occur on?
Android [For now I tested this on Android alone]

Please provide the following version numbers that your issue occurs with:

  • CLI: (run tns --version to fetch it) 2.4.0
  • Cross-platform modules: (check the 'version' attribute in the
    node_modules/tns-core-modules/package.json file in your project) 2.4.0
  • Runtime(s): (look for the "tns-android" and "tns-ios" properties in the
    package.json file of your project) 2.4.1 (Android)
  • Plugin(s): (look for the version number in the package.json file of your
    project)

Please tell us how to recreate the issue in as much detail as possible.

I have a button which enables the activity indicator, from my function I am trying to set isUserInteractionEnabled to false(Boolean) and trying to disable the interaction on the screen for certain time. But I still can click different buttons on the screen.

Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.

Some pieces of code.

<TextField hint="Password" secure="true" [(ngModel)]="user.password">
<Button text="Sign in" (tap) = "test()">
<ActivityIndicator style="color:red" [busy] = "isLoading" >

Component function
test() {
this.isLoading = !this.isLoading;
this.defaultTest = false;
}

Activity

  1. tsonevn
    self-assigned this
    on Dec 1, 2016
  2. tsonevn
    added
    os: android
    on Dec 1, 2016

  3. tsonevn commented on Dec 1, 2016

    @tsonevn
    tsonevn
    on Dec 1, 2016
    Contributor

    Hi @MadhuSudhanBhaskar,
    Thank you for reporting this issue.
    I confirm, that setting up isUserInteractionEnabled to false to some Layout will not affect the child components on Android. I also tested this case on iOS and It should work as expected and setting this property should also affect the inner components. We will investigate this behavior further and will provide possible solution. In the mean time you could set isUserInteractionEnabled to all component, which you would like to have no user interaction.

    Sample code:

    <StackLayout class="p-20" isUserInteractionEnabled="false">
    <Label text="Tap the button" class="h1 text-center"></Label>
    <Button isUserInteractionEnabled="false" text="TAP" (tap)="onTap()" class="btn btn-primary btn-active"></Button>
    <Label [text]="message" class="h2 text-center" textWrap="true"></Label>
</StackLayout>

    Regards,
    @tsonevn

  4. tsonevn
    added
    bug
    on Dec 1, 2016

  5. MadhuSudhanBhaskar commented on Dec 1, 2016

    @MadhuSudhanBhaskar
    MadhuSudhanBhaskar
    on Dec 1, 2016
    Author

    Hi @tsonevn

    So in that case, I should set a disable attribute on Scroll View also right?. Just for my confirmation, since I have not yet started on IOS it does not work there also, if I understood you properly.

    Regards,
    Madhu

  6. tsonevn commented on Dec 1, 2016

    @tsonevn
    tsonevn
    on Dec 1, 2016
    Contributor

    Hi @MadhuSudhanBhaskar,
    Excuse me if I was not clear enough in my previous comment.

    In iOS setting isUserInteractionEnabled to false to the Layout should also affect the children. I was able to reproduce the problem only on Android. If you would like to disable the scroll, you should also set isUserInteractionEnabled="false" to the ScrollView.

    Hope this helps.

  7. MadhuSudhanBhaskar commented on Dec 1, 2016

    @MadhuSudhanBhaskar
    MadhuSudhanBhaskar
    on Dec 1, 2016 via email
    Author
  8. tsonevn
    added this to the milestone on Dec 5, 2016
  9. tsonevn
    added
    severity: medium
    on Dec 5, 2016
  10. hshristov
    modified the milestones: 2.5.0, on Dec 5, 2016
  11. tsonevn
    removed their assignment
    on Dec 8, 2016

  12. hamorphis commented on Dec 8, 2016

    @hamorphis
    hamorphis
    on Dec 8, 2016
    Contributor

    Since this is the standard way iOS and Android behave, I will close this issue.

  13. hamorphis
    closed this as completedon Dec 8, 2016

  14. MadhuSudhanBhaskar commented on Dec 8, 2016

    @MadhuSudhanBhaskar
    MadhuSudhanBhaskar
    on Dec 8, 2016
    Author

    @hamorphis I dint get you, do we have to externally set isUserInteractionEnabled to false on each component in that case?

  15. hamorphis commented on Dec 8, 2016

    @hamorphis
    hamorphis
    on Dec 8, 2016
    Contributor

    @MadhuSudhanBhaskar Yes. You can write a simple recursive function to do this like this:
    TypeScript:

    import { View } from "ui/core/view";
import { LayoutBase } from "ui/layouts/layout-base";

export function setIsUserInteractionEnabledRecursive(view: View, newValue: boolean) {
    view.isUserInteractionEnabled = newValue;
    if (view instanceof LayoutBase) {
        let layoutBase = <LayoutBase>view;
        for(let i = 0, length = layoutBase.getChildrenCount(); i < length; i++){
            let child = layoutBase.getChildAt(i);
            setIsUserInteractionEnabledRecursive(child, newValue);
        }
    }
}

    JavaScript:

    var layout_base_1 = require("ui/layouts/layout-base");
function setIsUserInteractionEnabledRecursive(view, newValue) {
    view.isUserInteractionEnabled = newValue;
    if (view instanceof layout_base_1.LayoutBase) {
        var layoutBase = view;
        for (var i = 0, length = layoutBase.getChildrenCount(); i < length; i++) {
            var child = layoutBase.getChildAt(i);
            setIsUserInteractionEnabledRecursive(child, newValue);
        }
    }
}
exports.setIsUserInteractionEnabledRecursive = setIsUserInteractionEnabledRecursive;

  16. dxshindeo commented on Feb 22, 2017

    @dxshindeo
    dxshindeo
    on Feb 22, 2017

    This is a nice method, however, it doesn't correctly work when setting interactivity back on.
    If I set interactivity to false for view "disable-me", it works, tap doesn't happen, but when I set it back to true, the tap event does not happen;

    <GridLayout id="disable-me">
   <Label row="0" col="0" (tap)="test()"
</GridLayout>

  17. tsonevn commented on Feb 27, 2017

    @tsonevn
    tsonevn
    on Feb 27, 2017
    Contributor

    Hi @dxshindeo,
    Thank you for pointing this behavior.
    I reviewed that case and found that the above-given workaround will work only for children from type Button.
    When you change again isUserInteractionEnabled to true for the Label, the tap event will not be set again to the component.
    For your convenience, I have logged new issue, where this behavior has been described.
    For further info, you could keep track on the other issue here.

    Hope this helps

  18. lock commented on Aug 28, 2019

    @lock
    lockbot
    on Aug 28, 2019

    This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

  19. lock
    locked and limited conversation to collaborators on Aug 28, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugos: androidseverity: medium

    Type

    No type

    Projects

    No projects

      Milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions