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:

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

programatically?

Thank you

Answer 1

To "translate" the "Done" button you can follow the approach on Cordova 6.0.0 iOS localization with [email protected] 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.

Answer 2

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.