Select Bug in iOS?

ionic-v1
1

I’m having an issue with the <select> component in an iOS application. Binding a list of options using the ng-options directive. In the emulator and a live device, the user is presented the list using the native iOS picker. However, the item that is returned to the ng-model does not match the selected element.

<select ng-model="newCourse.Subject" ng-options="s.Title for s in courseSvc.subjectTypes">

The courseSvc has a list of (5) subjectTypes that each has a title, id, and other attributes. The selection is fine when I debug in Chrome on the desktop w/ an emulated device. But when I sue the iOS Simulator or an actual device the subject selected is always off by one position. I have tried this w/ the nightly .js and .css but still get the same behavior.

2

So, I have a few more details on the issue and what I am doing to work around it. The issue occurs when the newCourse is a new object bound to the form w/ no values for the Subject type. When I choose the select element, the native picker is shown and is set to a blank/empty entry. As mentioned, whichever item I select is off by one when the value is returned. However, if I click back in and select again, it works. So, when I create a new object I set a default value in the property. Is this expected behavior? Or, is there something else I could do in configuring my select element?

3

We are also experiencing this same issue on iOS. It works when the model is set before users changes the value. The bug occurs when the model is null and the user changes the value for the first time.

Any idea if this will be fixed or if there’s a workaround?

4

Hi, sorry for late answer, I hope it helps someone…

Ive had this same issue, managed to work it around by adding option as selected disabled and with value =""

for eg

<select ng-options"...">
   <option value="" selected disabled> Please select product </option>
</select>

so after that every select will be ok…

2 Likes