Nativescript: CSS Selector ":disabled" doesn't appear to work on iOS when using bindings

[NathanaelA]

Please, provide the details below:

CSS ':disabled' Selector doesn't work on iOS when isEnabled value is set via binding.

I have code like this:

<!-- This doesn't work --->
<Button class="btn" isEnabled="{{somevalue &gt; 0}}" text="hi">
<Button class="btn" isEnabled="{{somevalue &gt; 0 ? true : false}}" text="hi">

<!-- This one DOES work --->
<Button class="btn" isEnabled="false" text="hi">

In my css:

.btn {
  color: black;
}
.btn:disabled {
   color: red;
}

Did you verify this is a real problem by searching

Yes, #50 is the only issue about the :disabled, and it was about it being built. :grinning:

Which platform(s) does your issue occur on?

iOS (haven't tested android)

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

TNS: 2.4.0
Core: 2.4.4
Runtimes: 2.4.0

[tsonevn]

HI @NathanaelA,

I reviewed your case and tested it on my side, however :disabled CSS Selector seems to work as expected on my side. I tested this scenario on both Android and iOS. For your convenience I am attaching my code, which I use for tested and screenshots from the simulator.

main-page.xml

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo">

    <StackLayout class="p-20">
        <Button text="disable selector test 1" isEnabled="false" />

        <Button text="disable selector test 1" isEnabled="{{btnenabled}}" />

        <Button text="Disable second button" tap="onTap" />



    </StackLayout>
</Page>

main-page.ts

import { EventData } from 'data/observable';
import { Page } from 'ui/page';
import { HelloWorldModel } from './main-view-model';
import { Observable } from "data/observable"



var tmpObservable;
export function navigatingTo(args: EventData) {

    let page = <Page>args.object;
    tmpObservable = new Observable();
    tmpObservable.set("btnenabled", true);

    page.bindingContext = tmpObservable;
}

export function onTap(){
    tmpObservable.set("btnenabled", false);
}

It would help if you could provide sample project, which could be debugged locally and more info about the device or simulator, which you use for testing.

Regards,
@tsonevn

[NathanaelA]

Hmm, my labels are is in a RadListView, I wonder if that has anything to do with it?

I'll see if I can create a sample app, showing the failure.

[tsonevn]

Hi @NathanaelA,
I will investigate further this scenario while using RadListView and will verify, whether the problem could be related with this component.
However it will help if you could provide sample project, which could be debugged locally .

Regards,
@tsonevn

[NathanaelA]

@tsonevn - Yeah, I know what you mean; I wish I had a standalone example -- this is a fairly large client app; if I have some "extra" time I'll try and see if I can create small example of it. ;-)

[NathanaelA]

@tsonevn - I just ran into the same thing on android. However this was NOT in a list view. The code is simple:
css:

#btn {
    padding-top: 20;
    padding-bottom: 20;
    background-color: white;
    color: deepskyblue;
}

#btn:disabled, .a:disabled, button:disabled {
    color: gainsboro;
}

JS:

let screenData = new Observable({phone: ''});
exports.onNavigatingTo = function(args) {
    const page = args.object;
        page.bindingContext = screenData;
};

xml:

<Button id="btn" text="Next" tap="continue" isEnabled="{{ phone.length > 5 }}" class="a"/>

I tried all three CSS variations for disabled, Tag, Class, and id. All three don't trigger a change in the button.

Please note; when the phone text > 5 characters; the button is clickable, so the isEnabled is working as expected; it just is not showing that it is disabled.

This is on a Android 6 Geny emulator.

[tsonevn]

Hi @NathanaelA,
Thank you for the sample code.

I was able to reproduce this behavior and confirm this is a real problem, while using ":disabled" CSS selector on both iOS and Android.

For further info, you could keep track on this issue.

Regards,
@tsonevn

[lukeramsden]

Any ETA or workaround to fix this? Really annoying for my app, because currently it just looks like a normal button that doesn't do anything :P

[tsonevn]

Hi @lukeramsden,
Could you give us some more info about your case? It will help if you could also provide some sample code.
This issue has been related to the fact that the style from :disabled selector will not be applied to the Button when the conditional expression is used for the isEnabled property.
I tested the below-attached code with our release candidate and it seems this issue to be fixed.
XML

<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 class="p-20">
        <Button id="btn" text="Next" tap="continue" isEnabled="{{ phone.length > 5 }}" class="a"/>
    </StackLayout>
</Page>

TypeScript

import { EventData, Observable } from 'data/observable';
import { Page } from 'ui/page';
import { HelloWorldModel } from './main-view-model';


export function navigatingTo(args: EventData) {

    let screenData = new Observable();
    screenData.set("phone", '')
    let page = <Page>args.object;

    page.bindingContext = screenData;
}

[lukeramsden]

@tsonevn It's pretty much the same problem that @NathanaelA was having, but if it's fixed then I'll just wait for the next release :)

[dtopuzov]

@lukeramsden @NathanaelA
I can not reproduce on both platforms with steps from this comment

Do you still experience the issue with {N} 3.0.0?

[lukeramsden]

@dtopuzov Yes, it was fixed in 3.0.0 for me.

[dtopuzov]

Great, closing the issue.

[freddiandrew]

i try with {N} 4.1.0

it works when i enter value length reach >5, but if i delete the content so the value length less than 5, the button still enable, it`s look like the observable not work.

[lock[bot]]

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.