Drop-Down List not rendered right when used with tab template

[frostless]

When I followed the instructions in ReadMe to implement the dropdown on a simple "helloworld" project, it works as expected. But when I tried to use it on my own tab-based template project, it did not really work.(I put the code in one of the tab component) Mostly because the items in the drop down list were not rendered at all. I compared the settings between these two projects but I could not figure out where the problems are. I suppose though, it is because there is an extra middle layer tabs component in my project.

That is how it rendered:

Not too sure if that is an issue, but I do want to use the convenient drop down feature on my tab-based template project.

Here is the link to the repo of the tab template.

Here is the HelloWorld app that renders the drop down well.

Here is the Tab app that does not render the drop down well.

@DickSmith @jogboms Would you mind shedding some lights on this?

[PeterStaev]

Hi @frostless ,

Thanks for the demo apps! I was able to simulate the problem with them, but since I'm not that big of an Angular expert, so far I'm not able to trace what causes this behavior. So far what I've traced is that when you use the plugin with tabs, excessive amount of loaded and unloaded events are triggered. While if you use it in a non-tab interface only one loaded event is triggered. So I suspect something related to this, but again not sure what 😢

Ping @jogboms , @DickSmith as I think they are more experienced with Angular so they might have some ideas on this.

[frostless]

Thanks Peter Staev,

I will try to ping them.

Cheere

On Sun, Jan 7, 2018 at 9:30 AM, Peter Staev notifications@github.com wrote:

Hi @frostless https://github.com/frostless ,

Thanks for the demo apps! I was able to simulate the problem with them, but since I'm not that big of an Angular expert, so far I'm not able to trace what causes this behavior. So far what I've traced is that when you use the plugin with tabs, excessive amount of loaded and unloaded events are triggered. While if you use it in a non-tab interface only one loaded event is triggered. So I suspect something related to this, but again not sure what 😢

Ping @jogboms https://github.com/jogboms , @DickSmith https://github.com/dicksmith as I think they are more experienced with Angular so they might have some ideas on this.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/PeterStaev/NativeScript-Drop-Down/issues/157#issuecomment-355782814, or mute the thread https://github.com/notifications/unsubscribe-auth/AXkk2nzLYOWbCS0IGvodKaBZvtrDSpfBks5tH_P7gaJpZM4RVNom .

[jogboms]

@frostless I'd try to see if I could find anything useful.

[PeterStaev]

A similar problem happens on android (#163)

[Ross-Jo]

+1. Similar but bit different problem exists. Procedure to reproduce the problem

1. Add this 'NativeScript-Drop-Down' plugin to a bit old nativescript-tab-template,
2. After that, push the tab inside the template down to the page with 'androidTabsPosition="bottom"' option,
3. Lastly, if you move between the tabs super fast(+ as well as turning on and off the emulator) , at some point, a label(mostly the first item of the dropdown items list) which should be shown by a dropdown component suddenly disappears.

[Ross-Jo]

And this is the sample code sample.zip

Is there any clever way to prevent this weird behavior???

[des-esseintes]

same problem. created sample project from scratch containing tabview with 4 tabs (on the bottom), placed dd on the first one, when switching tabs 2->1->0 the dropdown on tab0 shows no element selected, like the image above.

main.xml:

<Page loaded="loaded" xmlns:dd="nativescript-drop-down">
    <StackLayout>
        <TabView androidTabsPosition="bottom" id="tabview" selectedIndexChanged="tab_change">
            <TabViewItem title="A">
                <StackLayout>
                    <dd:DropDown items="{{ d_days }}" selectedIndex="{{ d_selected }}" id="d_days" />
                </StackLayout>
            </TabViewItem>
            <TabViewItem title="B">
                <Label text="1" />
            </TabViewItem>
            <TabViewItem title="C">
                <Label text="1" />
            </TabViewItem>
            <TabViewItem title="D">
                <Label text="1" />
            </TabViewItem>
        </TabView>
    </StackLayout>
</Page>

and main.js:

var Observable = require("data/observable").Observable;
var ObservableArray = require("data/observable-array");

var page;
var model;

const days_of_the_week=["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];

exports.loaded = function(args) {
    page = args.object;
    model = new Observable({});
    model.set("d_days", new ObservableArray.ObservableArray(days_of_the_week));
    model.set("d_selected", 2);
    page.bindingContext = model;
};

exports.tab_change = function(args) {
//  console.log(args.object.selectedIndex);
};

[des-esseintes]

[priyankcommits]

thread bump, anyone find any solutions to this problem ?

[PeterStaev]

Hey guys, I've recircled onto this task after updating the iOS side to use the new recommended way of creating the native control in TNS 5.0. And found the following:

@frostless - after upgrading your project to TNS 5.2 and NG 7.2 noticed that you have a problem with your imports. You are adding the DropDownModule only in the app.module.ts, but your app uses lazy loading routes for the tab. So you actually need to import the DropDownModule in the module for your tabs. After making this change the widget started working fine.

@Ross-Jo - after upgrading your project to TNS 5.2 and NG 7.2 I was not able to simulate the problem.

@des-esseintes - I've created a brand new project with TNS 5.2 and used your code, but I was not able to simulate the problem.

With this said, I will close this task. In case any of you still have problems with the widget with the latest version of TNS/NG/widget please provide a playground link or a sample app and I will reopen it.