Select dropdown issue on ios

Hey guys,

having issues with the select dropdown, whenever I tap on an input that’s either a dropdown, date or time, nothing actually happens when I select an option, I have to manually tap out and only then will my choice stick.

Is there a way to have something that’s like the default functionality of ios where you get arrows to move from one option to the next and an X to close the selection? Or at the very least close the selection when I pick something?

Thanks

1 Like

Interesting, since we are just using some css to style the inputs. What version of ionic are you using? Beta 7/nightly builds? What device are you using?

I’m on beta 6, I noticed that you released beta 7 today, I won’t be able to test it on ios till tomorrow since I don’t have a mac at home.

Testing on an ipod 5th generation with ios 7.1

Here’s a screenshot of what it looks like on my device

Do you have the keyboard plugin installed?

Do you mean the ionic keyboard? If so, yes it’s installed.

  com.ionic.keyboard 0.0.1 "Keyboard"

Alright, you could do this to bring the keyboard accessories back

.run(function($ionicPlatform) {
  $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) {

  //Change this to false to return accessory bar 
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(false);
    }
    if(window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleDefault();
    }
  });
})
8 Likes

thanks! That worked perfectly

Just for my own understanding, was the accessory bar removed by default to avoid other conflicts?

No, it was removed because on native apps it’s not there. So for normal inputs, they wouldn’t have a next/previous button or done button.

Ok…works on Beta9, too.

Getting this issue on ionic beta 14 on ios

Set your accessory bar to true. You will get the next and done options. Another thing i want to know is when i scroll to a new option and tap outside, the select box takes the new selection without having to click on done? Can i disable this behaviour?

it was removed because on native apps it's not there.

@mhartington is there a different work around this issue. As you said, it was removed but if I set hideKeyboardAccessoryBar(false) in on controller, it remain across all other controllers. I originally had it only in module.run like so : hideKeyboardAccessoryBar(true) and I still keep there set to true.

Yes this is a strange issue and just want to confirm that I have understood the current state of the work around.

So…

I was unable to use the select pickers on iOS as the option would not be selected until I hit an area of the screen outside the select picker, this was the case when I had

cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

So as suggested here I changed this to be false which did make the select picker better on iOS as you can click the done button in the accessory bar but this does not feel very ‘native’?

Is what I have describe above correct regarding this issue? And if so is this the way to be dealing with it at the moment?

Thanks.

2 Likes

This doesn’t fix it for me. When setting the hideKeyboardAccessoryBar to false, the done button still doesn’t appear. Any suggestion how to fix this?

1 Like

Same for me. No matter what I try, the “DONE” button does not appear.

1 Like

I also did same… but of no luck

if (window.cordova && window.cordova.plugins.Keyboard) {
  cordova.plugins.Keyboard.hideKeyboardAccessoryBar(false); //by default it was true.. set to false to show confirm butotn for select element on ios
  cordova.plugins.Keyboard.disableScroll(true);

}

Just to check, did you put inside of ‘ready’ function?

 $ionicPlatform.ready(function()){
    if (window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(false);
      cordova.plugins.Keyboard.disableScroll(true);
    }
 }

You can try reinstall the keyboard-plugin too

Hi Guys

We still need solution for this, when someone click/moves between options it should be reflected on top without clicking Done or next button?

Can we achieve this?

Waiting for quick reply :slight_smile:

Regards

hi punee63, were you able to fix this?
I am having the same issue
thanks

Try using:

window.cordova.plugins.Keyboard.hideKeyboardAccessoryBar(false);

(With the if in front didn’t work)

That solved it for me.