Nativescript: isUserInteractionEnabled has no effect on SegmentedBar on Android

[sserdyuk]

When isUserInteractionEnabled is set to false, the segment bar remains fully operational. The expectation would be that it ignores any user activity, and that's how it works on iOS. The video below shows that SegmentedBar works regardless the setting being true or false.

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page">
    <Page.actionBar>
        <ActionBar title="My App" icon="" class="action-bar">
        </ActionBar>
    </Page.actionBar>
    <StackLayout>
        <SegmentedBar class="m-20" id="modeSelector" loaded="barLoaded">
          <SegmentedBarItem title="About" />
          <SegmentedBarItem title="Menu" />
          <SegmentedBarItem title="Reviews" />
        </SegmentedBar>
        <Button class="m-20" text="Set isUserInteractionEnabled to false" tap="setFalse" /> 
        <Button class="m-20" text="Set isUserInteractionEnabled to true" tap="setTrue" />
        <TextView class="m-20" text="" editable="false" loaded="textLoaded" />
    </StackLayout>
</Page>

import { EventData } from 'data/observable';
import { Page } from 'ui/page';
import { TextView } from 'ui/text-view';

let bar, text: TextView;

export function barLoaded(args: EventData) {
    bar = args.object;
}
export function textLoaded(args: EventData) {
    text = <TextView>args.object;
}

export function setFalse(args) {
    bar.isUserInteractionEnabled = false
    text.text += "\nSet false";
}
export function setTrue(args) {
    bar.isUserInteractionEnabled = true
    text.text += "\nSet true";
}

$ tns info
All NativeScript components versions information
┌──────────────────┬─────────────────┬────────────────┬───────────────┐
│ Component        │ Current version │ Latest version │ Information   │
│ nativescript     │ 3.0.3           │ 3.0.3          │ Up to date    │
│ tns-core-modules │ 3.0.1           │ 3.0.1          │ Up to date    │
│ tns-android      │ 3.0.1           │ 3.0.1          │ Up to date    │
│ tns-ios          │                 │ 3.0.1          │ Not installed │
└──────────────────┴─────────────────┴────────────────┴───────────────┘

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[tsonevn]

Hi @sserdyuk,
I confirm that this is a real issue for Android and that setting up the isUserInteractionEnabled to false via XML and code behind will not disable the interaction for the SegmentedBar. However, at this time there is not an appropriate workaround, that is applicable to this case. For further info keep track the issue.

[sserdyuk]

@tsonevn The workaround is to use setEnabled on the tabs. Here's working code.

import { EventData } from 'data/observable';
import { Page, View } from 'ui/page';
import { SegmentedBar } from 'ui/segmented-bar';
import { TextView } from 'ui/text-view';

let bar: SegmentedBar, text: TextView;

export function barLoaded(args: EventData) {
    bar = <SegmentedBar>args.object;
}
export function textLoaded(args: EventData) {
    text = <TextView>args.object;
}

export function setFalse(args) {
    // bar.isUserInteractionEnabled = false
    setSegmentedBarClickable(false);
    text.text += "\nSet false";
}
export function setTrue(args) {
    //bar.isUserInteractionEnabled = true
    setSegmentedBarClickable(true);
    text.text += "\nSet true";
}

export function setSegmentedBarClickable(isClickable: boolean) {
    if (bar.android) {
        const tabWidget = bar.nativeView.getTabWidget(),
            tabCount = tabWidget.getChildCount();

        for (var i = 0; i < tabCount; i++) {
            tabWidget.getChildAt(i).setEnabled(isClickable);
        }
    } else if (bar.ios) {
        bar.isUserInteractionEnabled = isClickable
    }
}

[tsonevn]

The issue is reproducible with NativeScript 4.1.
Archive.zip