Skip to content

Commit

Permalink
[BUGFIX canary] Prevent unknown input types from erroring.
Browse files Browse the repository at this point in the history
Browsers support various values for `type`, and generally auto-correct
to just `"text"` if an unknown type is set via standard HTML.

Unfortunately, the same auto-correct behavior does not apply when
setting the attribute directly, and in some circumstances throw an
error where the type is not valid.

Specifically, the following throws an error in IE10:

```javascript
var e = document.createElement('input');

e.type = 'search';
```

However the following HTML would auto-correct to `"text"`:

```html
<input type="search">
```
  • Loading branch information
rwjblue committed Mar 21, 2015
1 parent d201ae8 commit 7526d1f
Show file tree
Hide file tree
Showing 2 changed files with 73 additions and 1 deletion.
62 changes: 61 additions & 1 deletion packages/ember-views/lib/views/text_field.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,69 @@
@module ember
@submodule ember-views
*/
import Ember from "ember-metal/core";
import { computed } from "ember-metal/computed";
import environment from "ember-metal/environment";
import create from "ember-metal/platform/create";
import Component from "ember-views/views/component";
import TextSupport from "ember-views/mixins/text_support";

var inputTypeTestElement;
var inputTypes = create(null);
function canSetTypeOfInput(type) {
if (type in inputTypes) {
return inputTypes[type];
}

// if running in outside of a browser always return the
// original type
if (!environment.hasDOM) {
inputTypes[type] = type;

return type;
}

if (!inputTypeTestElement) {
inputTypeTestElement = document.createElement('input');
}

try {
inputTypeTestElement.type = type;
} catch(e) { }

return inputTypes[type] = inputTypeTestElement.type === type;
}

function getTypeComputed() {
if (Ember.FEATURES.isEnabled('new-computed-syntax')) {
return computed({
get: function() {
return 'text';
},

set: function(key, value) {
var type = 'text';

if (canSetTypeOfInput(value)) {
type = value;
}

return type;
}
});
} else {
return computed(function(key, value) {
var type = 'text';

if (arguments.length > 1 && canSetTypeOfInput(value)) {
type = value;
}

return type;
});
}
}

/**
The internal class used to create text inputs when the `{{input}}`
Expand Down Expand Up @@ -73,7 +133,7 @@ export default Component.extend(TextSupport, {
@type String
@default "text"
*/
type: "text",
type: getTypeComputed(),

/**
The `size` of the text field in characters.
Expand Down
12 changes: 12 additions & 0 deletions packages/ember-views/tests/views/text_field_test.js
Original file line number Diff line number Diff line change
Expand Up @@ -561,3 +561,15 @@ QUnit.test('should not reset cursor position when text field receives keyUp even

equal(caretPosition(view.$()), 5, 'The keyUp event should not result in the cursor being reset due to the bind-attr observers');
});

QUnit.test('an unsupported type defaults to `text`', function() {
view = TextField.create({
type: 'blahblah'
});

equal(get(view, 'type'), 'text', 'should default to text if the type is not a valid type');

appendView(view);

equal(view.element.type, 'text');
});

0 comments on commit 7526d1f

Please sign in to comment.