Keyboard plugin: close on tap on select. How?

1

Hi,

I see that when I made tap on select item, the item list don’t disappear. It’s disappear only if I made tap everywhere on the view. This is a bit unconfortable.

2

Hm, I’m having a bit a hard time following, can you put together a codepen to illustrate the situation and I can put it on a device?

3

I use this simple code:

<select ng-model="figlio.etaFiglio" ng-options="year.id as year.year for year in getAvailableYears()" class="form-control">
    <option value="">-- choose --</option>
  </select>

and keyboard plugin without settings.

 $ionicPlatform.ready(function() {
    // 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);
    }
    if(window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleDefault();
    }
 
  });

PS: How to change statusbar text color?

1 Like
4

Hmm, alright. For this you’re going to want to actually show the Accessory Bar. l wonder if we can modify our code to only hide the AccessoryBar when the target is a text area…hmm

So for now, the only quick solution would be to show the AccessoryBar.

For the statusbar…take a look at this new post on the learn site.

http://learn.ionicframework.com/formulas/customizing-the-status-bar/

5

Which is your idea? When?

6

This is a bummer! It really should auto close the select once a choice is made . . . :frowning:

7

You could work something out like this,

.directive('selectClick', function() {
  return {
    restrict: 'A',
    scope: true,

    controller: function($scope, $element) {

      $element.bind('click', function() {
        cordova.plugins.Keyboard.hideKeyboardAccessoryBar(false);
      });
      var select = $element.find('select');
      select.bind('blur', function() {
        cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

      });
    }
  }
});



 <label select-click class="item item-input item-select">
        <div class="input-label">
          Lightsaber
        </div>
        <select ng-model="item.checked" ng-change="selected()">
          <option ng-repeat="item in devList">{{ item.text }}</option>
        </select>
      </label>

This way, you can have the bar visible when using a select, but then hide it on blur.

8

Hi, I have a question: why do you need to close the Accessory Bar?

In my case, i was closing by default in app.js, and the solution was just not close it (seen here)

Thank You!
Regards.

9

after I using this, I found the select elem is getting stuck. I have to remove this, is there any perfect solution for this issue?

10

Any solution for this? I’m facing the same issue