11

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.

sebaferreras
  • 44,206
  • 11
  • 116
  • 134
user3153278
  • 297
  • 2
  • 4
  • 20

4 Answers4

10

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.

sebaferreras
  • 44,206
  • 11
  • 116
  • 134
  • 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 – user3153278 Aug 18 '16 at 11:57
  • What do you mean by 'give us four options only'? Please take a look at [this plunker](http://plnkr.co/edit/KovVrZ?p=preview). 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 :) – sebaferreras Aug 18 '16 at 12:13
  • 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. – user3153278 Aug 18 '16 at 12:18
  • 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. – sebaferreras Aug 18 '16 at 12:23
  • 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 – user3153278 Aug 18 '16 at 12:26
  • 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 :) – sebaferreras Aug 18 '16 at 12:28
  • Can't seem to identify why it wouldn't work for more options unfortunately! – user3153278 Aug 18 '16 at 13:01
  • I've found why that's happening in ionic 2 docs, so I've edited the answer. – sebaferreras Aug 18 '16 at 13:45
  • Thanks, so long story short, there is no way we can do that for the moment? – user3153278 Aug 18 '16 at 13:49
  • 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). – sebaferreras Aug 18 '16 at 13:54
  • We could easily do that indeed. How about getting the selection and updating the result in the ion-select field though? – user3153278 Aug 18 '16 at 14:03
6

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.

Vahid
  • 1,829
  • 1
  • 20
  • 35
2

Implementation made in Ionic version 6.12.3:

In your HTML create the ion-select. Add the attibute [interfaceOptions]="randomOptions":

<ion-select interface="action-sheet" [interfaceOptions]="randomOptions" ngModel>
    <ion-select-option value="...">Option #1</ion-select-option>
    <ion-select-option value="...">Option #2</ion-select-option>
</ion-select>

In your TS create a public variable with the exact name you gave in the HTML and add the options you intend for ion-select. Add the attribute cssClass: 'randomCSSClassName':

public randomOptions: any = { 
    cssClass: 'randomCSSClassName',
    ...
};

For last, in your global.scss file just add a CSS class with the exact same name you gave in TS and just add the class .action-sheet-group-cancel with a display: none:

.randomCSSClassName {
    .action-sheet-group-cancel {
        display: none;
    }
}

This implementation was tested in Web, iOS and Android. It works perfectly!

Grinnex.
  • 869
  • 2
  • 12
  • 23
  • Hmm... Are you sure the dropdown options will be nicely centered on the screen along with radio buttons? – M. Al Jumaily Apr 22 '22 at 22:28
  • 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!" – Grinnex. Apr 23 '22 at 11:16
  • Thank you for the update. I have done the three steps you suggested and [here](https://ibb.co/HDJ4pXx) is an image of how the UI looks like once the dropdown menu is clicked. – M. Al Jumaily Apr 25 '22 at 23:47
1

Pass empty value :

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

It is working in my case.

Khurshid Ansari
  • 4,638
  • 2
  • 33
  • 52