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

IE8: {{input type=""}} returns an error #11553

Closed
MichaelVdheeren opened this issue Jun 25, 2015 · 20 comments
Closed

IE8: {{input type=""}} returns an error #11553

MichaelVdheeren opened this issue Jun 25, 2015 · 20 comments
Labels

Comments

@MichaelVdheeren
Copy link

Using IE8 and Ember.js 1.13.2

When using {{input type="checkbox"}} IE8 shows a "this command is not supported" error. I guess this is the result of the type being set after the input element is rendered which is not possible in IE8.

http://stackoverflow.com/questions/18240063/ie8-throws-this-command-is-not-supported-error-when-using-knockout-for-data-bi

@MichaelVdheeren
Copy link
Author

Using <input type="checkbox" checked={{value}}> works but {{input type="checkbox" checked=value}} not.

Edit: second that, value bindings don't work at that point

@stefanpenner
Copy link
Member

In the < case, consider using an action to be notified of the DOM change

@MichaelVdheeren
Copy link
Author

A temporary solution would be:
<input placeholder="Search" value="{{search}}" onchange={{action (mut search) value="target.value"}} />

But @rwjblue said he will look into this for 1.13.3

@stefanpenner
Copy link
Member

A temporary solution would be:
<input placeholder="Search" value="{{search}}" onchange={{action (mut search) value="target.value"}} />

this is actually likely the best solution moving forward, although the original should also continue to work.

@MichaelVdheeren
Copy link
Author

Any idea if 1.13.3 would land this week?

@rwjblue
Copy link
Member

rwjblue commented Jun 29, 2015

@MichaelVdheeren - 1.13.3 should be out this week, but it hasn't fixed this issue yet.

@XrXr
Copy link

XrXr commented Jul 6, 2015

I ran into this also. {{input type="text"}} also breaks, and I think it breaks if type is set at all.

I looked into it a bit, and the cause seems to be Ember trying to set the type of the input element after it has been inserted into the DOM tree. IE 8 does not allow this.

Also, I tried the workaround with mut, it doesn't seem to update the value on IE8.

@stefanpenner
Copy link
Member

@XrXr have you tried 1.13.3 ?

@XrXr
Copy link

XrXr commented Jul 6, 2015

@stefanpenner yes

@stefanpenner
Copy link
Member

I looked into it a bit, and the cause seems to be Ember trying to set the type of the input element after it has been inserted into the DOM tree

into a fragment, it shouldn't be trying to insert it after its been inserted into the regular tree.

@XrXr
Copy link

XrXr commented Jul 6, 2015

@stefanpenner It turns out I was half correct. :P

I did a quick search and found that setting type on an element in the regular tree would cause this error, and I assumed that was the cause. I was too quick to judge.

It happens that the same error happens if the element is a part of a document fragment.

Below is a small test case

<!DOCTYPE html>
<html>
  <body>
    <script>
      var input = document.createElement('input');
      var docFragment = document.createDocumentFragment();
      docFragment.appendChild(input);

      input.setAttribute('type', 'text');  // throws in IE8

      alert('not reached');
    </script>
  </body>
</html>

So the type of an input element must be set before it is inserted into any tree.

@stefanpenner
Copy link
Member

So the type of an input element must be set before it is inserted into any tree.

This sounds reasonable, thanks for digging into this further. Are there other attributes like this?

@XrXr
Copy link

XrXr commented Jul 6, 2015

I don't know if there are any other attribute that have this behaviour. If there are any, we can be sure that there will be bug reports :)

@stefanpenner
Copy link
Member

I have opened another issue on HTMLBars to track this.

We will have to fix this for 1.13.x, which is a shame since it wont be needed for 2.x at all.

@XrXr
Copy link

XrXr commented Jul 6, 2015

By the way just, {{input}} is enough to break it

@stefanpenner
Copy link
Member

@XrXr ya, I would imagine.

@zanemayo
Copy link

Is there any update on this bug?
Here is a simple page showing the problem: http://zanemayo.github.io/ie8-textbox.html

@stefanpenner
Copy link
Member

Is there any update on this bug?

I plan to look at it soon. Sorry for the delay, my queue has been full.

@stefanpenner
Copy link
Member

tracking issue: tildeio/htmlbars#380

@rwjblue
Copy link
Member

rwjblue commented Nov 12, 2015

Fixed by #12596.

@rwjblue rwjblue closed this as completed Nov 12, 2015
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

5 participants