HTML select “Done” label not showing on Ionic for iOS

Question

I am building an iOS-app using the Ionic-framework. When I use select-elements, I do not get the header with the label \"Done\" when selecting items in the menu on iOS-nativ

Answer 1

Regarding @emccracken's comment, according to the Ionic Team the reason for hideKeyboardAccessoryBar is "because native apps seldom have an accessary bar. It's a dead give away that an app is built with web tech and isn't native."

You can show and hide the accessory bar on demand which is explained a bit here. Taking the $timeouts out of the directive worked better for me. Here's what mine looks like.

.directive('select', function() {
  return {
    restrict: 'E',
    link: function(scope, element, attrs) {
      element.bind('focus', function(e) {
        if (window.cordova && window.cordova.plugins.Keyboard) {
          // console.log("show bar (hide = false)");
          cordova.plugins.Keyboard.hideKeyboardAccessoryBar(false);
        }
      });
      element.bind('blur', function(e) {
        if (window.cordova && window.cordova.plugins.Keyboard) {
          // console.log("hide bar (hide = true)");
          cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
      });
    }
  };
})