Ionic - hide iOS selection wheel (select options) after selection

Question

I am trying to hide Ionic (iOS) "selection wheel" which is displayed after user want to select one of the select tag options.

I know that can be achieved by showing keyboard accessory bar and "done" button but that button text is hardcoded (and as far as I know we cannot translate it to other languages). So this is not an option.

I am also not available to use "change" event for the select, because its not triggered until selection wheel is being hidden.

Is there any way to:

Change "done" button text in accessory bar?
Detect changed value in selection wheel on iOS and hide it

programatically?

Thank you

Did you tried to use a Custom BarButtonItem and place your text there? — IgniteCoders, Sep 13 '16 at 08:49
Have you tried this: http://stackoverflow.com/questions/35196249/cordova-6-0-0-ios-localization-with-cordova-ios4-0-and-xcode-7-2-1 ? — daserge, Sep 13 '16 at 10:13
Let me know if you don't know how, to show you how to make a custom `BarButtonItem` instead of use system buttons. — IgniteCoders, Sep 13 '16 at 14:42
@daserge the "done" button will get translated according to the device language, is this not enough? — Sarantis Tofas, Sep 13 '16 at 17:52
No, the button is not translated unless the device language is supported by the project as explained on daserge's link — jcesarmobile, Sep 14 '16 at 10:48

score 3 · Answer 1 · edited May 23 '17 at 11:46

To "translate" the "Done" button you can follow the approach on Cordova 6.0.0 iOS localization with cordova-ios@4.0 and Xcode 7.2.1

Change the CFBundleDevelopmentRegion

<key>CFBundleDevelopmentRegion</key>
<string>es</string>

Or add the localizations you want to support (will work if the device has set any of that localizations)

<key>CFBundleLocalizations</key>
<array>
    <string>es</string>
    <string>en</string>
    <string>fr</string>
</array>

To make this changes you should use a "dumb" plugin that just writes on the info.plist using the config-file tag, or use a hook

You can also use a native component to show the list of options instead of using the select tag

There are probably a few plugins available, you can try this one, it doesn't have a method to hide the wheel, but it could be implemented, try opening an issue on the plugin github repo.

score 2 · Answer 2 · edited Sep 26 '16 at 18:35

I believe cordova plugin picker should help you out in this case.

This plugin allows for more dynamic access to the picker widget normally displayed when a <select> is tapped, in particular on ios. This plugin allows direct control of the PickerView and what options are shown. This enables lazy-loading display options, dynamically changing options and paging large data sets.

Since it gives more control of the picker view, it should help you out. Please check.

Ionic - hide iOS selection wheel (select options) after selection

2 Answers2