Fix template problems with gr-edit-preferences

Change-Id: I60c30c0d8c548faca9ea1258dc4b7e5524629485
diff --git a/polygerrit-ui/app/BUILD b/polygerrit-ui/app/BUILD
index 4a81f38..6156799 100644
--- a/polygerrit-ui/app/BUILD
+++ b/polygerrit-ui/app/BUILD
@@ -119,7 +119,6 @@
     "elements/diff/gr-diff/gr-diff_html.ts",
     "elements/diff/gr-patch-range-select/gr-patch-range-select_html.ts",
     "elements/gr-app-element_html.ts",
-    "elements/settings/gr-edit-preferences/gr-edit-preferences_html.ts",
     "elements/settings/gr-email-editor/gr-email-editor_html.ts",
     "elements/settings/gr-identities/gr-identities_html.ts",
     "elements/settings/gr-registration-dialog/gr-registration-dialog_html.ts",
diff --git a/polygerrit-ui/app/elements/settings/gr-edit-preferences/gr-edit-preferences.ts b/polygerrit-ui/app/elements/settings/gr-edit-preferences/gr-edit-preferences.ts
index 5e2c5cb..4909bef 100644
--- a/polygerrit-ui/app/elements/settings/gr-edit-preferences/gr-edit-preferences.ts
+++ b/polygerrit-ui/app/elements/settings/gr-edit-preferences/gr-edit-preferences.ts
@@ -26,6 +26,9 @@
 
 export interface GrEditPreferences {
   $: {
+    editTabWidth: HTMLInputElement;
+    editColumns: HTMLInputElement;
+    editIndentUnit: HTMLInputElement;
     editSyntaxHighlighting: HTMLInputElement;
     showAutoCloseBrackets: HTMLInputElement;
     showIndentWithTabs: HTMLInputElement;
@@ -58,6 +61,21 @@
     this.hasUnsavedChanges = true;
   }
 
+  _handleEditTabWidthChanged() {
+    this.set('editPrefs.tab_size', Number(this.$.editTabWidth.value));
+    this._handleEditPrefsChanged();
+  }
+
+  _handleEditLineLengthChanged() {
+    this.set('editPrefs.line_length', Number(this.$.editColumns.value));
+    this._handleEditPrefsChanged();
+  }
+
+  _handleEditIndentUnitChanged() {
+    this.set('editPrefs.indent_unit', Number(this.$.editIndentUnit.value));
+    this._handleEditPrefsChanged();
+  }
+
   _handleEditSyntaxHighlightingChanged() {
     this.set(
       'editPrefs.syntax_highlighting',
@@ -101,6 +119,16 @@
       this.hasUnsavedChanges = false;
     });
   }
+
+  /**
+   * bind-value has type string so we have to convert
+   * anything inputed to string.
+   *
+   * This is so typescript checker doesn't fail.
+   */
+  _convertToString(key?: number) {
+    return key !== undefined ? String(key) : '';
+  }
 }
 
 declare global {
diff --git a/polygerrit-ui/app/elements/settings/gr-edit-preferences/gr-edit-preferences_html.ts b/polygerrit-ui/app/elements/settings/gr-edit-preferences/gr-edit-preferences_html.ts
index f6344f0..a51deaf 100644
--- a/polygerrit-ui/app/elements/settings/gr-edit-preferences/gr-edit-preferences_html.ts
+++ b/polygerrit-ui/app/elements/settings/gr-edit-preferences/gr-edit-preferences_html.ts
@@ -28,23 +28,11 @@
       <label for="editTabWidth" class="title">Tab width</label>
       <span class="value">
         <iron-input
-          type="number"
-          prevent-invalid-input=""
           allowed-pattern="[0-9]"
-          bind-value="{{editPrefs.tab_size}}"
-          on-keypress="_handleEditPrefsChanged"
-          on-change="_handleEditPrefsChanged"
+          bind-value="[[_convertToString(editPrefs.tab_size)]]"
+          on-change="_handleEditTabWidthChanged"
         >
-          <input
-            is="iron-input"
-            id="editTabWidth"
-            type="number"
-            prevent-invalid-input=""
-            allowed-pattern="[0-9]"
-            bind-value="{{editPrefs.tab_size}}"
-            on-keypress="_handleEditPrefsChanged"
-            on-change="_handleEditPrefsChanged"
-          />
+          <input id="editTabWidth" type="number" />
         </iron-input>
       </span>
     </section>
@@ -52,47 +40,23 @@
       <label for="editColumns" class="title">Columns</label>
       <span class="value">
         <iron-input
-          type="number"
-          prevent-invalid-input=""
           allowed-pattern="[0-9]"
-          bind-value="{{editPrefs.line_length}}"
-          on-keypress="_handleEditPrefsChanged"
-          on-change="_handleEditPrefsChanged"
+          bind-value="[[_convertToString(editPrefs.line_length)]]"
+          on-change="_handleEditLineLengthChanged"
         >
-          <input
-            id="editColumns"
-            is="iron-input"
-            type="number"
-            prevent-invalid-input=""
-            allowed-pattern="[0-9]"
-            bind-value="{{editPrefs.line_length}}"
-            on-keypress="_handleEditPrefsChanged"
-            on-change="_handleEditPrefsChanged"
-          />
+          <input id="editColumns" type="number" />
         </iron-input>
       </span>
     </section>
     <section>
-      <label for="indentUnit" class="title">Indent unit</label>
+      <label for="editIndentUnit" class="title">Indent unit</label>
       <span class="value">
         <iron-input
-          type="number"
-          prevent-invalid-input=""
           allowed-pattern="[0-9]"
-          bind-value="{{editPrefs.indent_unit}}"
-          on-keypress="_handleEditPrefsChanged"
-          on-change="_handleEditPrefsChanged"
+          bind-value="[[_convertToString(editPrefs.indent_unit)]]"
+          on-change="_handleEditIndentUnitChanged"
         >
-          <input
-            is="iron-input"
-            id="indentUnit"
-            type="number"
-            prevent-invalid-input=""
-            allowed-pattern="[0-9]"
-            bind-value="{{editPrefs.indent_unit}}"
-            on-keypress="_handleEditPrefsChanged"
-            on-change="_handleEditPrefsChanged"
-          />
+          <input id="indentUnit" type="number" />
         </iron-input>
       </span>
     </section>