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.

Sign up for GitHub

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

Jump to bottom

IE9 returns "on" for radio value after Vue has mounted #4391

Closed
adoerler opened this issue Dec 5, 2016 · 1 comment
Closed

IE9 returns "on" for radio value after Vue has mounted #4391

adoerler opened this issue Dec 5, 2016 · 1 comment

Comments

@adoerler
Copy link

adoerler commented Dec 5, 2016

Vue.js version

2.1.4

Reproduction Link

https://jsfiddle.net/86m9vwad/11/

Steps to reproduce

Open JsFiddle in native IE9 (neither IE10, nor IE11 in compatibility mode will produce this error).
Klick get value => As you can see, the values of both radio buttons are read properly (first, second).
Klicking on "mount vue" and afterwards "get value" will return "on" for both radios.

What is Expected?

After mounting Vue the radio value should still be "first" and "second" in Internet Explorer 9.

What is actually happening?

I do not exactly now what Vue does when mounting an element, but it seems that the element is somehow processsed which leads to this IE error.
I've found the following StackOverflow entry: http://stackoverflow.com/a/13288980
It states if an radio element is created by JavaScript and the value is set BEFORE the type is set to "radio", IE will return the default value "on" instead the given value.

In my application I'm not able to tell which radio button was selected when submitting the form with jQuery AJAX Post request, as both inputs will send "on".

It would be great if someone with more Vue insights has some idea what could causing this issue.
I'm aware that in my example Vue itself is not needed at all, but I tried to create the most minimalistic code as possible which is able to reproduce the issue. In real live this is part of a website where the radio buttons are inside a container which is mounted in Vue. On another place jQuery reads the selected radio button value which works in all browser but IE9.

Kind regards and many thanks in advance
Andreas
@adoerler
Copy link
Author

adoerler commented Dec 6, 2016

Hi,

here is a short update after digging deeper and deeper into Vue.js:

  • Calling invokeCreateHooks AGAIN after the new element is created seems to fix the problem, i.e. (about line 4015 in 2.1.4):
if (isDef(data)) {
	invokeCreateHooks(vnode, insertedVnodeQueue);
}
insert(parentElm, vnode.elm, refElm);
// call invoieCreateHooks again as the values need to be applyied AFTER the element has been created (IE9 would discard the value as the element is not of type radio yet)
if (isDef(data)) {
	invokeCreateHooks(vnode, insertedVnodeQueue);
}

I've updated the fiddle with this change to demonstrate it:
https://jsfiddle.net/86m9vwad/12/

Leaving the first invokeCreateHook out did not work for me!

For know I think this issue is exatly related to the issue posted on Stack Overflow.
There is a new elemente created (which defaults to a input type text). The value is applied BEFORE the type is changed to radio and therefore IE9 does not get the correct value on the newly created element which defaults to "on".

I hope you can follow my explanations.

Kind regards
Andreas

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@adoerler