Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

bug: range inputs not working on ios9 #4628

Closed
bownie opened this issue Nov 12, 2015 · 14 comments
Closed

bug: range inputs not working on ios9 #4628

bownie opened this issue Nov 12, 2015 · 14 comments
Labels
needs: reply the issue needs a response from the user

Comments

@bownie
Copy link

bownie commented Nov 12, 2015

Type: bug

Platform: ios 8 webview

Slight twist on issue (github) #1078 - I'm using a range input in a modal popup. The input doesn't get the events at all under ios9. I've tried turning off scroll on the ion-content but still no joy. Works in the browser but not on the simulator or device. Raising this as a separate issue as I can't reopen the original and this seems a bit more straightforward breakage.

Originally got this issue on 1.6.5 and have just updated to 1.7.8 and confirm it's still the same. Screenshot attached of the modal - all elements work apart from the range inputs.

simulator screen shot 12 nov 2015 21 39 09

@bownie bownie changed the title range inputs not working on ios9 bug: range inputs not working on ios9 Nov 12, 2015
@mhartington
Copy link
Contributor

Hmm, not seeing this in my test. Started a project with a modal, added the following code to the modal

      <div class="list">
        <div class="item range range-positive">
          <i class="icon ion-ios-sunny-outline"></i>
          <input type="range" name="volume" min="0" max="100" value="33">
          <i class="icon ion-ios-sunny"></i>
        </div>
      </div>

ran on my iphone running ios9 with no problems.

Could you provide an example or demo to work from?

@bownie
Copy link
Author

bownie commented Nov 12, 2015

Thanks. You're right it works. It's my dialog that is breaking the behaviour. It's included below - if I remove the first input type (text selectedStation.Name) or if I paste your example at the top of the ion-content section then the range inputs (all of them) work. If I leave it as below the range inputs don't work.

<div class="modal" ng-controller="StationCtrl">
    <ion-header-bar class="bar-stable">
          <h1 class="title">{{'Edit station' | translate}}</h1>
    </ion-header-bar>
    <ion-content class="padding" has-header="true" padding="true">
      <div class="list">
        <label class="item item-input">
          <span class="input-label">{{'Station name'|translate}}</span>
          <input type="text" placeholder="Station name" ng-model="selectedStation.name" required>
        </label>
          <ion-checkbox ng-model="selectedStation.ignore_rain">{{'Ignore sensor'|translate}}</ion-checkbox>
          <ion-checkbox ng-model="selectedStation.disabled">{{'Disabled'|translate}}</ion-checkbox>
          <ion-checkbox ng-model="selectedStation.sequential">{{'Sequential'|translate}}</ion-checkbox>
      </div>
      <div class="list">
          <ion-toggle ng-model="moistureAlert.enabled" toggle-class="toggle-positive">
            <div ng-show="moistureAlert.enabled">
            {{'Alert enabled'|translate}} : {{moistureAlert.min}} % - {{moistureAlert.max}} %
            </div>
            <div ng-show="!moistureAlert.enabled">
            {{'Alert disabled'|translate}}
            </div>
          </ion-toggle>
          <div class="item range range-positive" ng-show="moistureAlert.enabled">
            <i class="icon ion-ios-plus-outline"></i>
              <input type="range" name="volume" min="0" max="100" ng-model="moistureAlert.max">
              <i class="icon ion-ios-plus"></i>
          </div>
          <div class="item range range-positive" ng-show="moistureAlert.enabled">
            <i class="icon ion-ios-minus-outline"></i>
              <input type="range" name="volume" min="0" max="100" ng-model="moistureAlert.min">
              <i class="icon ion-ios-minus"></i>
          </div>
        <button class="button button-block button-positive" ng-click="updateStation()">{{'Submit'|translate}}</button>
        <button class="button button-block button-cancel" ng-click="cancel()">{{'Cancel'|translate}}</button>
      </div>
    </ion-content>
</div>

@mhartington
Copy link
Contributor

Would you mind throwing this into a codepen with mock data

@bownie
Copy link
Author

bownie commented Nov 16, 2015

Well I've put the salient pieces into a codepen but it won't tell you much as this is an iOS9 problem. The range inputs work fine in the browser. As I said in my last comment I can get it working by removing the first text input.

http://codepen.io/bownie/pen/ZbwYOB

@bownie
Copy link
Author

bownie commented Nov 19, 2015

Ok after some playing around I've got to the bottom of the problem. This is to do with input focus. When the input type="text" is the first field on the modal then in iOS this input grabs focus but it doesn't show that it has focus as there is no keyboard. If you click on the text input, it pops up a keyboard and then on returning from it the range inputs on the modal become responsive. Curiously the ion-checkboxes are responsive without this focus so this is where the confusion arises.

If I move the text input to be the second input type on the modal then this issues goes away.

So it would appear there is an inconsistency which I can work around clumsily as above - is there a better way to do this (force focus elsewhere or remove focus?) and the wider question is is there a bug here to be fixed?

@wggley
Copy link

wggley commented Nov 23, 2015

+1 for input type text being first is the issue.
In my case buttons below become unresponsive.

@felixja
Copy link

felixja commented Dec 31, 2015

What about having a list full of text inputs?? :S I can't see the way to make it work...

Thanks!

@robinvanb
Copy link

Having the same problem here. When a modal has a text input the range input becomes unresponsive.
Any workaround for this?

@artzstudio
Copy link

This issue appears to be related to a bug I just opened here: #5346

@jgw96
Copy link
Contributor

jgw96 commented May 24, 2016

Hello all! Is this still an issue with the latest version of ionic? Thanks!

@jgw96 jgw96 added the needs: reply the issue needs a response from the user label May 24, 2016
@jgw96
Copy link
Contributor

jgw96 commented May 31, 2016

Hello all! As it seems it has been a while since there was any activity on this issue i will be closing it for now. Feel free to comment if you are still running into this issue. Thanks for using Ionic!

@jgw96 jgw96 closed this as completed May 31, 2016
@barkoczi
Copy link

barkoczi commented Jun 8, 2016

This bug is still in system. Ionic v1.3.1

If i focus any input/select element on my form then i can't change input[type=range]. If form is pristine, the range input works well.

This problem appears only in mobile app (ios9), app works well in chrome.

@DahliaWitt
Copy link

+1 also experiencing issues with iOS 9 and 10. Works fine in chrome.

@zakrava
Copy link

zakrava commented Jul 26, 2016

Range input is unresponsive on iOS9, on android works great.

@ionitron-bot ionitron-bot bot locked and limited conversation to collaborators Sep 8, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
needs: reply the issue needs a response from the user
Projects
None yet
Development

No branches or pull requests

10 participants