hideKeyboardAccessoryBar(false) doesn't show accessory bar on the select tag's focus event

[benmcmaster]

I only want the accessory bar to show up when focusing on a <select> tag. It's a bit weird without the accessory bar because changing the select doesn't send a select change event until the options keyboard is closed. I like that the accessory bar has that "Done" button.

in the focus event of the select: window.cordova?.plugins.Keyboard.hideKeyboardAccessoryBar(false)

then in the blur event of the select: window.cordova?.plugins.Keyboard.hideKeyboardAccessoryBar(true)

This used to work beautifully before I updated the plugin to 2.2.0. Now the accessary bar doesn't show up initially. However when I send the app to the background and then bring it back, the accessory bar will then show.

Is there a fix? Or a work around?

[rahulbpatel]

I am having the same issue. This used to work but not sure when it stopped.

[ghost]

Same issue here

[KnoxArg]

Same here

[hung-doan]

Upgraded from 1.0.8 to 2.2.0 . Get the same issue now

[VinceOPS]

Same here....

I also tried to call hideKeyboardAccessoryBar(false) in ionic js/utils/tap.js (just where the tap on a select element is handled), and the same issue comes in (the initial roll-select display doesn't show the accessory bar, but if I then focus a text input, the accessory bar is visible...)

[Martin-Mo]

Same here

[SteveConnelly]

I cannot get the accessory bar to show up on any input fields, not just select.

[VinceOPS]

@mhartington Hi Mike! Any clue about this issue? I know you wrote a directive which used to display accessoryBar when focus was set on a <select>. Unfortunately it doesn't work anymore.

[blablapolicja]

+1

[PTthe13]

+1.

[mhartington]

This is not an issue with the keyboard Plugin. The plugin is behaving as expect. As this is more of a general dev question, please move this conversation to the forum.

[VinceOPS]

Hi @mhartington. It seems to be because of plugin changes. You shared a directive on ionicframework forum which overrided "select" tag in order to trigger hideKeyboardAccessoryBar with false on focus and with true on blur. It used to work well, yet it doesn't anymore. That's very frustrating as being (so easily) able to "toggle" accessory bar visibility was very convenient.

[ghost]

My solution was change 'focus' with 'touchstart' is not perfect but works.

element.on('touchstart', function(e) {
          $Keyboard.hideAccessoryBar(false);
});
element.on('blur', function(e) {
            $Keyboard.hideAccessoryBar(true);
 });

[victorkurauchi]

hey @vxcamiloxv thanks for sharing. it solved for me too.

[VinceOPS]

@vxcamiloxv Finally, someone accepted to help and found something... Thank you very much. Using touchstart works :).

[jjmahe]

Does not work for me. Isn't it possibly linked with the iOS update (9.3.4 13G35) ?

[Fyson]

Hi guys. no matter what i do i cant get the accessorybar to show up anywhere. not on normal text or more importantly the select. i tried vxcamiloxv solution without succes. Does anyone know how to fix this?

[ghost]

I had tested out @vxcamiloxv workaround and I can tell now that the cordova.plugins.Keyboard.hideKeyboardAccessoryBar(false) method is working. But not on the right moment. It only applies on the 'blur' event.

[wwwbruno]

+1

[heliumb]

+1 if this is the "expected behavior" then the expected behavior is wrong - it prevents something very common and logical from taking place (namely showing the accessory bar for selects while keeping it hidden for inputs)

[AdrienDC]

Please push a new release with this corrected

[heliumb]

@mhartington this is definitely an issue. My team is on the verge of leaving Ionic Framework over this. Not having a means to toggle the accessory bar on and off as the user moves between regular text inputs and selects completely kills the user experience. Please advise if this will be fixed or addressed soon.

[VinceOPS]

@heliumb I fear it won't be solved. Most of these issues (this one, and many others, like the white background left by the closing keyboard, until it completely disappears, on Android) have been left over for weeks, even before ionic 2 was announced. And since it was, it looks like the team is really focused on this project, and not on ionic 1 anymore.

Regarding this particular issue, on ionic 2, they added a custom "select" component which get rid of the "native" select/dropdown... Thus, no "accessory bar" needed.

[mhartington]

We'all take a look and see what's up! We are not ignoring this plugin, just other priorities. If anyone happens to come up with a PR to make this behave like it did for, we'll review it

[Kinzi]

@vxcamiloxv Worked for me! THX! :)

[abennouna]

Tested on iOS 10.1 - While sometimes buggy, the following seems quite Ok for me, even for forms with mixed selects / inputs:

element.on('touchstart 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);
    }
  });
});

[mcastre]

@vxcamiloxv Where exactly did you implement that fix?

[ghost]

@mcastre I created a directive:

function select () {
        var selectDirective = {
            restrict: "E",
            link: preLink
        };
        return selectDirective;

        // Functions
        function postLink (scope, element, attrs, ngModel) {           
            // / Hide/show accessory bar on ios
            element.on("touchstart focus", function (e) {
                cordova.plugins.Keyboard.hideKeyboardAccessoryBar(false);
            });
            element.on("blur", function (e) {
                cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
            });

        }
}

[mcastre]

Yea, I saw a little afterward that it was linked to a post you made in the Ionic forums.

Thanks!

[jgfet]

You know what, the thing only displays in landscape mode, not portrait. How bizarre!

[molinajes]

sorry, It dont work in ionic 3