HTML select "Done" label not showing on Ionic for iOS

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

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

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.