ng-disabled not working on input type=select on iOS

[marcusanzalone]

Say you have series of cascaded selects.

select 1
select 2
select 3
select 4

where selecting an item in 1 triggers a set of options to be used for select 2. Select 2 has an ng-disabled="!selectableItems2", so is not enabled until you select an item in 1 and 'selectableItems2' is assigned a value. Similar with select 3 being based off of selecting an item in select 2.

On web (safari and chrome) and on android (4.4 was tested), selects 2 (and so 3 and 4 as well) is disabled until a selection is made in select 1. However, in iOS (6 and 7 tested), even when a list of items is not available and should not accept taps, it still accepts the tap and brings up the picker widget with the default "select an item" as the only item.

A fiddle that gives an anguar.js example of this type of cascading selects is:

http://jsfiddle.net/annavester/Zd6uX/

[perrygovier]

Hey @marcusanzalone, I'm having trouble reproducing your problem. Can you provide a codepen example. The following works fine for me on iOS http://codepen.io/perrygovier/pen/Etgab

[marcusanzalone]

I've uploaded a zip archive that contains several files to add to the ionic sidemenu demo: https://www.dropbox.com/s/9pdd7jppb5dww6h/sidemenu.zip

So, if you create a sidemenu demo project (ionic start menuDemo sidemenu), then replace the following with the files in that archive:

menuDemo/www/index.html
menuDemo/www/js/apps.js
menuDemo/www/js/controller.js
menuDemo/www/js/services.js
menuDemo/www/templates/selects.html

If you run locally in a browser, you will see that the selects work properly.

Then create and build the ios platform, open it in Xcode (iphone 4"/iOS 7.1), and run from there.

When the simulator is running, and nothing is selected for region (shows 'Select a Region), tap on the select for any of State, County, or City. The iOS picker then still is presented for those selects.

Note that this also will let you see another oddity as well. This happens under iOS 7 only. If you select region, then use the next ">" action on the picker accessory bar, it jumps down to Date. If you then use the previous action "<", you will jump back to State. If this were native, I would say that the next action is not triggering the iOS didSelectRow event in iOS 7, but I am not sure what the javascript translates this into the triggering of the javascript watch event. This works correctly under iOS 6.

[marcusanzalone]

In updating my example for issue #1536 (popup click through), I realized that I failed to include the menu.html file. The link to an updated archive is:

https://www.dropbox.com/s/k7s3l3mnhmcyx9b/sidemenu_withPopup.zip

[perrygovier]

Hey @marcusanzalone, thanks for the example. This looks like an issue between angular and iOS's version of webkit. I can reproduce it, but I think it's more an issue to bring up with the angular team.

There is a work around though, in addition to your ng-disabled, do an ng-style or ng-class to give it the css property pointer-events: none;. This will prevent the select scroller from displaying.

For future reference, here's a sample project with all the files ready to go to help reproduce and test the issue. https://www.dropbox.com/s/0ao7o94j8ryfe35/SelectDemo-issue-1549.zip

[jsanta]

Perhaps a little to late, but what seems to work is adding a CSS style:
select[disabled] { pointer-events: none; }

By the way, disabled options inside a select don't work either. A workaround may be using optiongroups.