downdown rending blank options

[ejaz]

We are facing issue of rending blank options shown when loaded runtime. However if user click on seemlingly blank option, whole dropdown get re-rendered correctly and shows all data. Kindly help us resolve this issue.

following is code snippet from xml and viewmodel.js ===================== xml ======================

                <dd:DropDown  class="text-center" id="election_years" items="{{ years }}" isEnabled="{{ electionYearEnabled }}" yearIds="{{ yearIds }}" selectedIndex="{{ selectedIndex }}" selectedIndexChanged="{{ electionYearSelectedIndexChanged }}" row="0" colSpan="2" hint="Election" />
                <Label text=""/>
                <dd:DropDown class="text-center text-primary" id="election_provinces" items="{{ provinces }}" isEnabled="{{ electionProvinceEnabled }}" provinceIds="{{ provinceIds }}" selectedIndex="{{ selectedIndex2 }}" selectedIndexChanged="{{ electionProvinceSelectedIndexChanged }}" row="0" colSpan="2" hint="Province" />
                <Label text=""/>
                <dd:DropDown class="text-center text-primary" id="election_districts" items="{{ districts }}" isEnabled="{{ electionDistrictEnabled }}" districtIds="{{ districtIds }}" selectedIndex="{{ selectedIndex3 }}" selectedIndexChanged="{{ electionDistrictSelectedIndexChanged }}" row="0" colSpan="2" hint="District" />
                <Label text=""/>
                <dd:DropDown class="text-center text-primary election_constituencies" id="election_constituencies" items="{{ constituencies }}" isEnabled="{{ electionConstituencyEnabled }}" constituencyIds="{{ constituencyIds }}" selectedIndex="{{ selectedIndex4 }}" selectedIndexChanged="{{ electionConstituencySelectedIndexChanged }}" row="0" colSpan="2" hint="Constituency" />
                <Label text=""/>

===================== xml ====================== ===================== viewmodel.js ======================

 for (var i = electionconstituencies.length; i > 0; i--) {
                electionconstituencies.pop();
            }
            for (var i = electionconstituenciesIDs.length; i > 0; i--) {
                electionconstituenciesIDs.pop();
            }
            viewModel.set("selectedIndex4", "");
            data.forEach(row => {
                electiondistricts.push(row.name)
                electiondistrictsIDs.push(row.id);
            });

===================== viewmodel.js ======================

[ahtishamashraf]

Facing the same issue when internet is slow .

[PeterStaev]

This should be fixed now with the new version on NPM.

[ejaz]

still face same issue after updating plugin to nativescript-drop-down │ ^3.2.2.

[PeterStaev]

Hey @ejaz , I suggest you nuke your platforms and node modules folders and try again. If you still have the problem i will need a reproducible sample project attached or created in the playground as I cannot simulate this locally.

[ejaz]

https://play.nativescript.org/?template=play-js&id=CTkoQC&v=2

please check on android above playground app.

steps to reproduce bug.

1. click any dropdown to show options
2. DO NOT select any option. instead click on any other part of the screen , and then again click the dropdown you previously clicked , gif of it is attached below how to reproduce the error

https://im3.ezgif.com/tmp/ezgif-3-38ed0958ab.gif

[PeterStaev]

Hey @ejaz , please try the new version on npm. It should resolve the issue.

[ejaz]

It works fine in above mentioned case (in playground app) but still exist if ajax response data is slow

[PeterStaev]

Well I have no idea. If you can simulate via setTimeout in a demo app/playground I would be happy to assist and fix.