TextField component file type setting in Safari 10.0

[mykehsd]

Ember version > 2.10
Safari version tested: 10.0.1
Reproducible: Every time -> https://ember-twiddle.com/aa37dcf277451f5954d6ca2d17e16dc6?openFiles=templates.application.hbs%2C

Issue: When rendering multiple textfield components on a page, only the first type will be allowed on the page
. The set of the test element .type property successfully returns however the type actually doesn't alter the value of the property.

Problem line:

ember.js/packages/ember-glimmer/lib/components/text_field.js

Line 32 in 7819409

inputTypeTestElement.type = type;

Possible solution: Lowering the scope of inputTypeTestElement to inside the method resolves the problem, but I assume it was scoped for performance reasons.

[mykehsd]

After more investigation, the problem is isolated to file types. Safari does not allow creating an input type and changing it to "file".

input = document.createElement('input');
input.type = 'text';    // === 'text'
input.type = 'file';     // === 'text'

[pixelhandler]

Seems like a bug, second input for type="file" doesn't work in Safari, but does in Chrome, Firefox and Brave. Also odd that If I switch the order of inputs the file inputs works and so does the search input, https://ember-twiddle.com/529223e54e9ce39150c3366001a42742?openFiles=templates.application.hbs%2C seem that the issue is more of a problem with the file input type

[rwjblue]

[cibernox]

FWIW, I also found this problem yesterday in emberx-file-input. I PR'ed a workaround by ...not using {{input}} and using a plain <input> (I think there is no good reason to use {{input}} ever again since ember 2.3.1)

For more weirdness, I found that this only happened the first time I rendered the view with the error. If I transitioned somewhere else and then come back it worked again.

[iezer]

I can also reproduce and it does seem to depend on the ordering of the types of input helper invocations. See twiddle I've also seen (possibly related) that with Ember 2.10, {{input type='date'}} does not work on Safari, or PhantomJS. It works in Chrome and Firefox.

CC @jamesarosen.