[Bug] Input checkbox value returns "on" in Internet Explorer 11

[cspanring]

Binding the value attribute of an input (checkbox) tag to a controller/component property seems broken in IE11.

See a minimal example here: https://cspanring.github.io/ie11-input-value/ (code)

template:

<input value={{inputValue}} type="checkbox" onclick={{action "getCheckboxValue"}}>My value is {{inputValue}}

controller:

inputValue: 3,

  actions: {
    getCheckboxValue() {
      let value = document.querySelector('input[type=checkbox]').value;
      // in IE11 value will be "on"
      alert('My value is: ' + value);
    },
  },

[Serabe]

If you take Ember out of the equation, does it return 3?

[cspanring]

Yes, if I set the value attribute in the template just to 3 IE11 will return it correctly.

Also, tried to replicate in vanilla javascript: http://output.jsbin.com/xutilididi/1/

If you have a few pointers or instincts where to start looking, I'm happy to take this on and try to triage it a little bit further.

[Serabe]

Can confirm this. The problem is that value is not being set in the element at all. It can be checked looking at the element in the inspector panel.

[thirdwheel]

I stumbled on a solution for this. In IE11, if you set the value then change it to a checkbox, it will erase the value. So:

oCheckBox=document.createElement('input');
oCheckBox.name='testcheckbox';
oCheckBox.value='123456789';
oCheckBox.type='checkbox';
alert(oCheckBox.value);

This will show the correct value in Chrome, but will say 'on' in IE11. The following will ensure correct behaviour in both browsers:

oCheckBox=document.createElement('input');
oCheckBox.name='testcheckbox';
oCheckBox.type='checkbox';
oCheckBox.value='123456789';
alert(oCheckBox.value);

To quote someone in a chatroom when answering a hairy IE question, "did you properly light the incense? In which order did you chant and throw the chicken bones?" Instances like this make this question less silly the more insanity you find.

[thirdwheel]

Perhaps a more pertinent question - if you change the order of the value and type attributes, do you get the same behaviour?

EDIT: Here's a JSFiddle that shows what I mean: https://jsfiddle.net/0k20tjnL/

[aafaq-hassan-confiz]

I am having same issue in internet explorer 11. Yes, the problem is that value is not being set in the element at all. It is issue with any element whether it is checkbox or not. If a constant value is assigned then it is being set like "value=3", but value binding is not working at all like "value={{somevar}}". I am using ember-cli 3.1.4

[jherdman]

Hey friends. I've worked around this in the past with radio buttons too (see #14712). The gist is that IE11 cares a lot about the order of your attributes. In general I've wrapped up native radio buttons in a component that has a didRender hook that looks like this:

  didRender() {
    // IE11 needs to have it value re-set
    this.element.value = this.value;
  },

[santanapaulo]

Any news on this? I am getting the same issue when I run tests in IE 11, which checks the values of my checkbox's.

[santanapaulo]

@jherdman Can you help me find a way to wrap up the native ember-radio-button?

[cspanring]

@santanapaulo check out this PR/repo as an example: yapplabs/ember-radio-button#82

[christianhaller3000]

I stumbled on a solution for this. In IE11, if you set the value then change it to a checkbox, it will erase the value. So:

oCheckBox=document.createElement('input');
oCheckBox.name='testcheckbox';
oCheckBox.value='123456789';
oCheckBox.type='checkbox';
alert(oCheckBox.value);

This will show the correct value in Chrome, but will say 'on' in IE11. The following will ensure correct behaviour in both browsers:

oCheckBox=document.createElement('input');
oCheckBox.name='testcheckbox';
oCheckBox.type='checkbox';
oCheckBox.value='123456789';
alert(oCheckBox.value);

To quote someone in a chatroom when answering a hairy IE question, "did you properly light the incense? In which order did you chant and throw the chicken bones?" Instances like this make this question less silly the more insanity you find.

Thank you so much @thirdwheel You saved my day!

[locks]

Long live IE11 🙌