Ion-select shows alert box instead of action-sheet when there are more elements

[manuviswam]

Ionic version: (check one with "x")
[ ] 1.x (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 2.x
[x] 3.x

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
As described here,, the interface attribute on an ion-select elemen cant takes the following values: action-sheet, popover and alert.

action-sheet works as expect when there is three elements but shows an alert when there are more items.
Live demo http://plnkr.co/edit/6hKkG2w9p08JDK0knmka?p=preview

Expected behavior:
Get a action-sheet when interface attribute is set to action-sheet on an ion-select component.

Steps to reproduce:

Related code:

<ion-content padding>
  Welcome to this <ion-icon name="ionic"></ion-icon> <b>Ionic 2 app</b>
  <button ion-button icon-only clear small color="twitter">
      <ion-icon name="logo-twitter"></ion-icon>
    </button>
    <h1>This opens an alert instead of a popover:</h1>
    <h3>The edited file is app/home.page.html</h3>
    <ion-item>
  	<ion-label>Gender</ion-label>
  		<ion-select interface="action-sheet">
  			<ion-option value="a">A</ion-option>
  			<ion-option value="b">B</ion-option>
  			<ion-option value="c">C</ion-option>
  			<ion-option value="d">D</ion-option>
  			<ion-option value="e">E</ion-option>
  			<ion-option value="f">F</ion-option>
  			<ion-option value="g">G</ion-option>
  			<ion-option value="h">H</ion-option>
  			<ion-option value="i">I</ion-option>
  			<ion-option value="j">J</ion-option>
  		</ion-select>
	  </ion-item>
    
</ion-content>

Other information:

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

global packages:

    @ionic/cli-utils : 1.5.0
    Cordova CLI      : 7.0.1 
    Ionic CLI        : 3.5.0

local packages:

    @ionic/app-scripts              : 1.3.12
    @ionic/cli-plugin-ionic-angular : 1.3.1
    Cordova Platforms               : android 6.2.3 browser 4.1.0 ios 4.4.0
    Ionic Framework                 : ionic-angular 3.5.0

System:

    Node       : v6.10.3
    OS         : macOS Sierra
    Xcode      : Xcode 8.3.3 Build version 8E3004b 
    ios-deploy : 1.9.1 
    ios-sim    : 5.0.13 
    npm        : 5.0.3 

[brandyscarney]

Thanks for the issue! This is the expected behavior as described in the Select documentation:

The action sheet interface can only be used with a single value select. If the number of options exceed 6, it will use the alert interface even if action-sheet is passed.

This is done because action sheet can only show so many options before it goes off of the screen. There should also be a warning in your console for this. I'm going to close this as it is the desired behavior. 🙂

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.