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 ======================
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 ======================
===================== 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);
});