I have an item-select based on the examples, using a dynamic list that works just fine. The problem is that the list doesn’t actually change its value until you tap on an item, and then tap outside the select control.
This creates a problem in that if a user selects an item in the item-select, and then clicks the “submit” button, the default value of the item-select is returned. The correct value is only returned if the user taps the value, then taps outside the select control to make it disappear, and update the selected value.
How can I update the value and hide the control when a value is tapped?
Here’s the code:
<label class="item item-input item-select">
<div class="input-label">
Post to:
</div>
<select name="groupList" data-ng-model="newPostData.groupId">
<option data-ng-repeat="group in availableGroups" value="{{group._id}}" data-ng-bind-html="group.groupName"></option>
</select>
</label>
I picture is worth 1,000 words. Note that there is no “Done” button as with a traditional select control on iOS, and ironically that “Done” button appears when viewing a codpen for the select on the phone’s browser.
I’ve tried this with a standard select (i.e. not data driven) and have the same problem on iOS devices. This is from the emulator but behavior is exactly the same on a “real” device running iOS 8:
The only way to acknowledge the selection is to tap above the control, which makes for a poor user experience.
Huzzah! After some different keywords in my search I discovered that this is because I was hiding the keyboard accessory bar. I believe this is the default setting in the app template I originally used, and not sure what I lose by commenting it out, but it brought back the “done” button (apparently this is called the “peaker.”) Now it looks proper:
For those in the same boat, comment out this code from your app.js:
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
