IE8 throws "unexpected call to method or property access" when component tag is input

[yonjah]

on IE8 you cannot append child notes to an input element.
(there might be some other tags you cannot append child into)
So if you have a component or view with tagName: 'input' it will not work on IE8
since the render_buffer appends text node to every component -
render_buffer.js#L529

I'm not sure how this can be fixed ( I wish I had more understanding of whats going on in the renderer), but using a different tagName (like label) as a wrapper and adding the actual element in the template works as a temporary fix.

example code -
http://jsbin.com/towujofari

[rwjblue]

As you mentioned (and confirmed by MDN) <input> is a void element and is not permitted to have content. The issue with the original JSBin is that a component by default contains a layout that amounts to {{yield}}, which adds the empty text nodes that cause the error in IE8. {{input}} / Ember.TextField gets around this by setting the defaultLayout to null here.

Using the built in {{input}} or Ember.TextField as a base class, or setting the defaultLayout to null should fix the issue in the original JSBin: http://jsbin.com/nejogo/1/edit?html,js,output

[yonjah]

Of course there are many ways to get around this issue, but it still exist.
Ember should probably not add empty test nodes to void elements, but I guess this will be too complex to fix. The minimum is to update the Docs and throw a warning when component tag is set to a void element.

Currently I'm using one addon that sets input as its component base name and I'm sure there are many more out there that their developers has no idea about this issue (which do to IE8 devtools and other issues is enormously hard to debug).

[rwjblue]

Of course there are many ways to get around this issue, but it still exist.

Yes, there are likely millions of ways that code that you write in your app could cause a problem under IE8. That is the cost that we all pay for supporting such an old platform. Using the normal mechanisms to get a bound <input> in Ember ({{input}} or extending Ember.Textfield) works properly on IE8.

Ember should probably not add empty test nodes to void elements, but I guess this will be too complex to fix.

It may be possible, I'll have to think about it, but for the time being I think that we can definitely avoid adding these text nodes if you have not supplied a template (aka template block) to the component.

[ebryn]

This is also an issue with tagName: 'img' as I discovered today. The issue doesn't appear to occur in 1.13.5 anymore.

[rwjblue]

IE8 is no longer supported for 2.0.0+. We will gladly accept PR's fixing 1.13 for IE8 issues, but we are not going to keep IE8 only issues open in the issue tracker.