attribute "mode" ignored in the select component

[almothafar]

Ionic version: (check one with "x")
[ ] 1.x
[x] 2.x

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request

Current behavior:
The popup modal stay on the default mode of the application

Expected behavior:
mode must be applied regardless the default of the system, as what described here: https://ionicframework.com/docs/v2/api/components/select/Select/

Steps to reproduce:

<ion-select [(ngModel)]="selectedOption" mode="md">
  <ion-option *ngFor="let opt of options" [value]="opt.value">{{opt.label}}</ion-option>
</ion-select>

This is the app config:

export const IonicAppConfig = {
  pageTransition: 'ios-transition',
  iconMode: 'ios',
  mode: 'ios'
};

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Cordova CLI: 6.5.0
Ionic Framework Version: 2.0.1
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.1.3
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v7.2.0
Xcode version: Not installed

P.S: do you want me to close this issue after 1 or 2 days? since you love close issues even if they are not solved !? or maybe you need to rename this framework to: ionic-close-issues

[jgw96]

Thanks for opening an issue with us! We will look into this.

[brandyscarney]

So the mode is actually working properly on the Select component; the select component being the input box with the arrow.

I think what you're looking for is changing the mode of the Alert that pops up, which could be achieved with the following:

<ion-item>
  <ion-label>Select</ion-label>
  <ion-select [selectOptions]="{ mode: 'md' }">
    <ion-option value="1">1</ion-option>
    <ion-option value="2">2</ion-option>
    <ion-option value="3">3</ion-option>
    <ion-option value="4">4</ion-option>
  </ion-select>
</ion-item>

We could change it so that if you set the mode on the Select it passes it to the alert automatically, but I wonder if anyone is using this to where they want the input changed but not the alert? Including @manucorporat for discussion.

[almothafar]

The look must be like this:

It is clear like this, nothing else, I tried to use alert and was not the desired look.

I noticed that you change the mode like [selectOptions]="{ mode: 'md' }" not like what in documentation and what I used mode="md" .

We gave up on ionic for desktop, so I can't test this in an actual project, today we completely finished refactor to get rid of Ionic2.

[brandyscarney]

Yes, the documentation on select options are here: http://ionicframework.com/docs/v2/api/components/select/Select/#select-options

This is how you style the alert or action sheet that you call from the select since it is just using the alert/action-sheet API under the hood. 🙂

[Hanzofm]

Yes, the documentation on select options are here: http://ionicframework.com/docs/v2/api/components/select/Select/#select-options

This is how you style the alert or action sheet that you call from the select since it is just using the alert/action-sheet API under the hood. 🙂

@brandyscarney This option not works currently? In the docs the options appears but in the action sheet docs not

[brandyscarney]

@Hanzofm It should be working, but I just tested Select, Alert, and Action Sheet separately and it seems Action Sheet is the only one missing the mode property. Could you create a separate issue for this? Please feel free to tag me if you'd like, I want to make sure this gets fixed.

I'm going to close this issue since the original problem was setting the mode on Select and that is working properly for Select. Thanks!