Ionic2 Ion-select without OK and Cancel

Question

I have built an Ionic2 app and I am currently trying to improve the UX. To do that, I received some feedback that made me think of whether there is a way of having a

    <ion-select>
      <ion-option>
      </ion-option>
    </ion-select>

which upon tapped on, would give me the output straight away and not wait for the user to press on the currently appearing 'OK'and 'CANCEL' buttons that the ionic action sheet(http://ionicframework.com/docs/v2/api/components/select/Select/) uses by default.

Any suggestions will be greatly appreciated! :)

EDIT:

As @sebaferrreras has suggested,

If the number of options exceed 6, it will use the alert interface even if action-sheet is passed.

So if you need to use more than 6 options, you are going to have to find a workaround as for the moment, this functionality is NOT listed under the Ionic2 docs.

Solution 1

Changing the API used in the select element (by using the ActionSheet API) could be an option.

In order to do that, you only need to add interface="action-sheet" in the ion-select element.

  <ion-item>
    <ion-label>Gender</ion-label>
    <ion-select interface="action-sheet">
      <ion-option value="f" selected="true">Female</ion-option>
      <ion-option value="m">Male</ion-option>
    </ion-select>
  </ion-item>

I'm not sure if that's a valid option (in terms of UX) in your app.

---

EDIT:

Just like you can find in Ionic 2 docs

If the number of options exceed 6, it will use the alert interface even if action-sheet is passed.

Solution 2

I know this thread is 7 months old and the OP is probably long past this question but since the feature is yet to be added to ionic framework, I'm adding the workaround I came up with for other people's reference.

CSS PART

Intuitively the first thing you need to do is to add some sass/css to hide the unwanted buttons. I did that by passing a css class "remove-ok" to selectOptions for my ion-select element. (I'm only removing OK button but if someone needs to remove cancel button as well, that's an easy css modification).

In component:

this.selectOptions = {
      cssClass: 'remove-ok'
    };

and in HTML:

<ion-select [selectOptions]="selectOptions">

And in app.scss add:

.remove-ok {
    .alert-button:nth-child(2) {
        display: none;
    }
}

SCRIPT PART

Now that the OK button is hidden, you will need to somehow close the alert view.

To invoke click() event on the hidden OK button is straightforward and intuitive but you'll soon find out that although it works perfectly on ionic serve, it won't work on an actual iOS device.

The solution is to find reference to the alert view, pass the checked option to the select handler, and finally dismiss the view.

So in ngOnInit in your component class, you'll need this:

ngOnInit() {
        let root = this.viewController.instance.navCtrl._app._appRoot;
        document.addEventListener('click', function(event){
        let btn = <HTMLLIElement> document.querySelector('.remove-ok .alert-button-default:nth-child(2)');
        let target = <HTMLElement> event.target;
        if(btn && target.className == 'alert-radio-label')
        {
              let view = root._overlayPortal._views[0];
              let inputs = view.instance.d.inputs;
              for(let input of inputs) {
                if(input.checked) {
                  view.instance.d.buttons[1].handler([input.value]);
                  view.dismiss();
                  break;
                }
              }
            }
        });
    }

Again, if you intend to remove the Cancel button as well, mind the css references in this code.

Solution 3

Pass empty value :

<ion-select okText="" cancelText="">
      <ion-option>
      </ion-option>
    </ion-select>

It is working in my case.

Comments

[user3153278]

I am not sure I see your point. Adding the action-sheet interface gives us four options only, none of which seem to be related to my problem. Thank you for your answer thought! :-) @sebaferreras

[sebaferreras]

What do you mean by 'give us four options only'? Please take a look at this plunker. Anyway, it seems that if the options are more than just a few, the select component still uses the Alert API. I will test a few things in that plunker and will update the answer if I find something that could help :)

[user3153278]

Sorry, I meant that the ActionSheet interface seemed to have 4 methods that could be extended only. And, yes, this is exactly the functionality I am looking for. And what did you mean by "if the options are more than just a few, the select component still uses the Alert API"? The example from plunker has multiple options(perhaps using the Alert API indeed) but lacks both OK and Cancel buttons and selects the option on mouse click.

[sebaferreras]

Yeap, but if you add just another option to the select element, an alert will be shown. So if this is the functionality you were looking for, I'll just investigate a little bit more about the number of options that could be used with this API, and edit the post with that information.

[user3153278]

Oh, I see! And I will investigate this now and edit the post later if I manage to find a solution. Feel free to post any other suggestions if you find a better solution to this problem though! :) Thanks

[sebaferreras]

Sounds great. If you think this answered the OP, please mark it as the accepted answer later so other SO users with the same issue can find a solution easier :)

[user3153278]

Can't seem to identify why it wouldn't work for more options unfortunately!

[sebaferreras]

I've found why that's happening in ionic 2 docs, so I've edited the answer.

[user3153278]

Thanks, so long story short, there is no way we can do that for the moment?

[sebaferreras]

If you want to show more than 6 options, then we should find a workaround (using CSS and events to hide the buttons on the alert, and close the alert as soon as you select any of the options).

[user3153278]

We could easily do that indeed. How about getting the selection and updating the result in the ion-select field though?

[Ranjith Varatharajan]

Hi, This works great but i've found an issue with this. please check it out here

[Ranjith Varatharajan]

and also i'm getting the return value as an array instead of string?

[Parag Ghadge]

on <ion-option (ionSelect)="changeOKButton()"/> I want to again change the css back to OK button But it's not working...

[M. Al Jumaily]

Hmm... Are you sure the dropdown options will be nicely centered on the screen along with radio buttons?

[Grinnex.]

I am sure. By the date/ionic version that I implemented this solution, tested it and posted the answer, it's just like I previously said "This implementation was tested in Web, iOS and Android. It works perfectly!"

[M. Al Jumaily]

Thank you for the update. I have done the three steps you suggested and here is an image of how the UI looks like once the dropdown menu is clicked.