Handling Select/options and iOS Keyboards

demo
1

By default, Ionic hides the accessory bar for iOS.

While this is great for text inputs, it can be problematic for select options.
So this directive will change this setting on the fly and bind to the select element.

<label class="item item-input item-select">
  <div class="input-label">
    Lightsaber
  </div>
  <select>
  <option>Blue</option>
  <option selected>Green</option>
  <option>Red</option>
  </select>
</label>

.directive('select', function($timeout) {
  return {
    restrict: 'E',
    link: function(_, element) {
      element.bind('focus', function(e) {
        $timeout(function() {
          if (window.cordova && window.cordova.plugins.Keyboard) {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(false);
          }
        })
      });
      element.bind('blur', function(e) {
        $timeout(function() {
          if (window.cordova && window.cordova.plugins.Keyboard) {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
          }
        });
      });
    }
  }
})

Cheers

1 Like
2

hi
why do you wrap it in $timeout?

3

Just to make sure I didn’t miss angulars digest cycle.

4

As i understand the $timeout uses .$apply. Do you think just useing .$apply would do the same?

5

If you have multiple selects that the user can click back/next through, then the $timeouts cause the accessory bar to flicker in and out. And occasionally the order of the focusing and blurring gets messed up so blur/hide from the previous select happens after the focus/show of the current one, and you’re left without the bar. Removing the $timeouts works better for me.

6

Hi, good idea. However, it seems that it CAN’T work anymore:

Any clue, guys?

Thanks

7

Agreed with the post above. This directive no longer works after the upgrade to the keyboard plugin. Can anyone provide some insight into what changed with the plugin that would cause this to stop working and how to fix it?