Ionic-framework: Click on ion-select in header triggered outside its boundaries

[basvdijk]

Short description of the problem:

The selectbox opens when you click after the down arrow. In the Plunkr you can see this more clearly. Click on any place to the right of the down arrow and the select popup opens. This is especially annoying when other buttons are on the right of the select e.g. search button in this example.

What behavior are you expecting?

The select modal is not triggered when is clicked outside the select boudaries.

Steps to reproduce:
Add an ion-select to a header within a navbar

Which Ionic Version?
2.x

Plunker that shows an example of your issue

http://plnkr.co/edit/qEMxp1qGb3QsFIL7qc0K?p=preview

Run ionic info from terminal/cmd prompt: (paste output below)

Cordova CLI: 6.3.1
Ionic CLI Version: 2.0.0-beta.32
Ionic App Lib Version: 2.0.0-beta.18
ios-deploy version: 1.8.6
ios-sim version: Not installed
OS: Mac OS X El Capitan
Node Version: v5.11.0
Xcode version: Xcode 7.3.1 Build version 7D1014

[jgw96]

Hello, thanks for opening an issue with us! The select component should actually be inside an ion-item outside of the ion-navbar but inside of ion-header like i have demonstrated in this plunker. Thanks for using Ionic!

[basvdijk]

Thanks @jgw96 But this introduces a new problem. As shown in this screenshot

The select is now to close to the buttons on the right. Shouldn't there be more space between the select box and the icons on the right?

And still when I click the white area next to the arrow of the select box it opens. I would expect the tap area only be from the left to the arrow and not after.

Moving it outside the navbar but inside the header results in taking extra vertical space:

Then I could use tabs instead. I wanted this solution to save on the vertical space ;)

[miltonhowe]

The requirement that <ion-select> appear inside <ion-item> does not appear to be spelled out in any of the documentation. I was lucky to find this page after spending ¾ of a day driving myself insane trying to figure out why every button on my page was opening the select box.

[captainjim1]

@jgw96 - so, if I'm using a select in say, an ion-card, I still have to wrap it in an ion-item? This brings in a bunch of CSS that I don't want.

[ionitron-bot[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.