Select not working on Android

[gregaton]

See http://forum.ionicframework.com/t/select-not-working-on-android/1255/3

Select elements are basically broken in Android right now. They only work sometimes and only if you spam click them.

urbiwan already identified that the problem goes away if the select tag is not included in the if statement in ionic.tapElement (line 2366 in ionic.bundle.js).

[adamdbradley]

Select seems to be treated differently with input taps, so to play it safe it wouldn't be simulated it's been clicked. Thanks for creating this issue and bringing it to our attention.

[saplaum]

I am using current beta v1.0.0.1 and the select tag is still not working on my Nexus devices (4 & 7).

[adamdbradley]

Would you be able to explain a bit more about what is not working about it,
and how to replicate the issue? Thanks

On Thursday, March 27, 2014, Sascha Plaum [email protected] wrote:

I am using current beta v1.0.0.1 and the select tag is still not working
on my Nexus devices (4 & 7).

Reply to this email directly or view it on GitHubhttps://github.com//issues/836#issuecomment-38788635
.

[saplaum]

I just found out, that the select tag is working exactly like it should, but not if it is located on my modal view. I can see the select, see that it gets populated by my factory (slow edge connection) but a tap on the tag would not open the expected menu.
(Android 4.4.2)

[tolhzar]

I'm testing on Samsung Galaxy S3 and I confirm that nothing happens when you tap on the select.
Android version 4.1.2. Please note that I'm testing in browser (Chrome).

[coyu1314]

I am having the same issue on nexus 4 (4.4.2). when tapping on the dropdown, nothing happen. selection didn't show up

[saplaum]

Last night I got this working! I actually used a select in a modal like it is shown in the examples:

          <label class="item item-input">
            <span class="input-label">Produkt</span>
            <select ng-model="newPosition.product" ng-options="product.name for product in products" ng-required>
              <option value="">-- wählen --</option>
            </select>
          </label>

After using a div instead of label around this block, my select is finally shown on my mobile devices.

         <div class="item item-input">
            <span class="input-label">Produkt</span>
            <select ng-model="newPosition.product" ng-options="product.name for product in products" ng-required>
              <option value="">-- wählen --</option>
            </select>
          </div>

[adamdbradley]

@vreen thanks for pointing that out, wrapping selects in labels seems like the main issue that browsers aren't a fan of. I'm working on styling the select elements right now, so I'll be sure to document that <select> elements should not be wrapped with a <label>. Thanks for debugging that!

Related:
#1007

[philipjoubert]

I'm struggling with the select element. As a start I want to replicate the example Select item from the documentation:

<div class="item item-input item-select">
    <div class="input-label">
      Select City
    </div>
    <select>
      <option selected>Madison</option>
      <option>Milwaukee</option>
    </select>
  </div>

It seems that Ionic.css has no styles for the select list. Is this an issue or am I being silly?

[adamdbradley]

@philipjoubert Sorry, its only in the nightly build at this moment.

[philipjoubert]

Thanks Adam. That explains a lot.

Philip Joubert

On Thursday 03 April 2014 at 3:43 PM, Adam Bradley wrote:

@philipjoubert (https://github.com/philipjoubert) Sorry, its only in the nightly build at this moment.

—
Reply to this email directly or view it on GitHub (#836 (comment)).

[saplaum]

@adamdbradley thanks for putting efford in styling selects :-)

[tolu360]

Hi. Selects seem to have stopped working again in nightly builds after 1578 or is it just me?

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