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-native. However it will show up when I use the app in iOS/Safari. Screenshots and code attached. Any input/solutions on this would be much appreciated.

Screenshots:

iOS Safari Screenshot

iOS Native/Ionic Screenshot

Markup

<label class="item item-input item-select">
    <div class="input-label">
        Bostadstyp
    </div>
    <select ng-change="addParam('objectType', selectedHouseType)" ng-model="selectedHouseType" ng-options="houseType.id as houseType.label for houseType in houseTypes"></select>
</label>

Answer 1

The Ionic app contains a default code in app.js who hide the keyboard acessory bar, you need to comment this following line: cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

Getting something like this:

// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins.Keyboard) {
  //cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
  cordova.plugins.Keyboard.disableScroll(true);

}

Answer 2

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);
        }
      });
    }
  };
})

Answer 3

If you still have this issue, my case was a keyboard plugin conflict between cordova-plugin-keyboard and cordova-plugin-ionic-keyboard.

So check on config.xml to see if you have more than one plugin and if so remove with:

cordova plugin remove [plugin-name]

then install proper plugin:

ionic cordova plugin add ionic-plugin-keyboard

https://ionicframework.com/docs/native/keyboard/

Then you will be able to use cordova.plugins.Keyboard.hideKeyboardAccessoryBar(false);

Hope it helps.

Answer 4

If using Ionic capacitor and facing these issues, none of the fixes here will work. According to Capacitor discussions, this is a side effect of the Keyboard plugin. Can be fixed by doing:

import {Keyboard} from "@capacitor/keyboard";

...

Keyboard.setAccessoryBarVisible({isVisible: true});