bug: Input range => Frozen slider on Internet Explorer 11

[JeanMeche]

Type: bug

Platform: desktop browser

Here is a demo : http://codepen.io/anon/pen/OPdJRq

[mhartington]

Hmm, it works on a touch screen, so this maybe related to touch/pointer events

[bitflower]

It also works with the keyboard cursor keys (after selecting the range with the mouse)

[bitflower]

It works in IE11 when we remove the e.preventDefault(); inside tapMouseDown (talking ionic.bundle.js).

The question is if this is better targetted with IE 11 in mind or with type=range in mind. If I understand correctly this function handles the focus of text fields and the keyboard being shown. So we could exclude the type=range here similiar to the select|option exclude in the if:

if ((!ionic.tap.isTextInput(e.target) || tapLastTouchTarget !== e.target) && !(/^(select|option)$/i).test(e.target.tagName)) {
      e.preventDefault();
}

EDIT: I added another condition to the if and it works. The question to @mhartington is: Is this the right place to handle this or would it be one more step before where tapEnabledTouchEvents has a different value in IE11 than in other browsers.

Workaround:
if ((!ionic.tap.isTextInput(e.target) || tapLastTouchTarget !== e.target) && !(/^(select|option)$/i).test(e.target.tagName) && e.target.type !== 'range') {
// If you preventDefault on a text input then you cannot move its text caret/cursor.
// Allow through only the text input default. However, without preventDefault on an
// input the 300ms delay can change focus on inputs after the keyboard shows up.
// The focusin event handles the chance of focus changing after the keyboard shows.
e.preventDefault();
}

If you think this is right I can prepare a PR.

[mhartington]

I'm going to let @perrygovier Take a look at this. He's been working scrolling/touch events so he'd know best

[anubhavgupta]

I am also facing the same issue with range input on IE 11.
For the time being the only solution seams to be is to set element.contentEditable = true for the range input element.

[5im0n]

The problem is also present in Edge 😣
Before waiting for the 1.2 milestone, the workaround of @anubhavgupta works great

<div class="item range">
  <i class="icon ion-volume-low"></i>
  <input type="range" name="volume" contenteditable="true">
  <i class="icon ion-volume-high"></i>
</div>

[mlynch]

Okay, a few discoveries: First, we can't preventDefault in tapMouseDown if it's a range (at least on IE). However, range styles are totally borked in Edge, so that needs to be fixed as well.

[mlynch]

Should be fixed now, and range styles were fixed. Thanks!

[cmellinas]

Hi @mlynch,

When you say : 'we can't preventDefault in tapMouseDown if it's a range (at least on IE). '

I used the following workaround : https://forum.ionicframework.com/t/range-slider-not-movable-in-internet-explorer/19592/4

The fix was to only add && e.target.type !== 'range' at the end of the if condition

It's weird but the range works well on my computer on IE10 & IE11 only with this condition (even if I don't understand why the method isTextInput is bypassed by IE)