Repository: sveltejs/svelte (JavaScript)
Date: 2018-03-14 20:57:23+00:00
Task type: Bug Fix

Issue:
Input types in IE
The way Svelte creates inputs that are not supported in IE throws an 'Invalid argument' error.

Example:
https://svelte.technology/repl?version=1.56.2&gist=fa8724f2cbebbcf391e3184b0bc5c39c

I have a hard time finding some good docs on this, but here are some similar issues:
https://github.com/emberjs/ember.js/issues/10458
https://github.com/angular/angular/issues/16575

I have seen this in IE11 but have not checked other versions of IE.

What I have found is that the method Svelte uses to set the type throws an error:

```
input.type = 'date';
```

But, if you use the `setAttribute`, that seems to work.  For instance, my workaround is this:

```
  oncreate: function() {
    if (this.get('isIE')) {
      this.refs.dateInput.setAttribute('type', 'date');
    }
  }
```

Note that though IE doesn't support the date type, there are polyfills/shims that will work around it, hence the need to have the attribute correct.

I am not sure the repercussions of switching to `setAttribute`, but I am not necessarily convinced that this is a problem Svelte needs to solve.


Issue discussion:

Solution patch:
diff --git a/src/generators/nodes/Attribute.ts b/src/generators/nodes/Attribute.ts
--- a/src/generators/nodes/Attribute.ts
+++ b/src/generators/nodes/Attribute.ts
@@ -518,7 +518,6 @@ const attributeLookup = {
 	type: {
 		appliesTo: [
 			'button',
-			'input',
 			'command',
 			'embed',
 			'object',


Test patch:
diff --git a/test/js/samples/input-without-blowback-guard/expected-bundle.js b/test/js/samples/input-without-blowback-guard/expected-bundle.js
--- a/test/js/samples/input-without-blowback-guard/expected-bundle.js
+++ b/test/js/samples/input-without-blowback-guard/expected-bundle.js
@@ -33,6 +33,10 @@ function removeListener(node, event, handler) {
 	node.removeEventListener(event, handler, false);
 }
 
+function setAttribute(node, attribute, value) {
+	node.setAttribute(attribute, value);
+}
+
 function blankObject() {
 	return Object.create(null);
 }
@@ -206,7 +210,7 @@ function create_main_fragment(component, state) {
 
 		h: function hydrate() {
 			addListener(input, "change", input_change_handler);
-			input.type = "checkbox";
+			setAttribute(input, "type", "checkbox");
 		},
 
 		m: function mount(target, anchor) {
diff --git a/test/js/samples/input-without-blowback-guard/expected.js b/test/js/samples/input-without-blowback-guard/expected.js
--- a/test/js/samples/input-without-blowback-guard/expected.js
+++ b/test/js/samples/input-without-blowback-guard/expected.js
@@ -1,5 +1,5 @@
 /* generated by Svelte vX.Y.Z */
-import { addListener, assign, createElement, detachNode, init, insertNode, proto, removeListener } from "svelte/shared.js";
+import { addListener, assign, createElement, detachNode, init, insertNode, proto, removeListener, setAttribute } from "svelte/shared.js";
 
 function create_main_fragment(component, state) {
 	var input;
@@ -16,7 +16,7 @@ function create_main_fragment(component, state) {
 
 		h: function hydrate() {
 			addListener(input, "change", input_change_handler);
-			input.type = "checkbox";
+			setAttribute(input, "type", "checkbox");
 		},
 
 		m: function mount(target, anchor) {