BUG: undefined check in editable formhandler fails, fixes #156

src/formhandler.template.html

@@ -185,7 +185,7 @@ Each template receives these variables:
     >
     <option value="" disabled selected>-- select --</option>
     <% _.each(isEditable.options, function(item) { %>
-      <option <%- val && val === item ? 'selected': null %> value="<%- item %>">
+      <option <%- val !== undefined && val === item ? 'selected': null %> value="<%- item %>">
         <%- item %>
       </option>
     <% }) %>
@@ -195,7 +195,7 @@ Each template receives these variables:
 <% } else if (isEditable.input == 'radio') { %>
 
   <% _.each(isEditable.options, function(item) { %>
-    <input type="radio" <%- val && val === item ? 'checked': null %> value="<%- item %>"
+    <input type="radio" <%- val !== undefined && val === item ? 'checked': null %> value="<%- item %>"
       <% for (key in isEditable.attrs) { %>
         <%= key + '="' + isEditable.attrs[key] + '"' %>
       <% } %>

test/test-formhandler-editable.html

@@ -6,7 +6,8 @@
   <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
   <link rel="stylesheet" href="../node_modules/font-awesome/css/font-awesome.min.css">
   <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css" />
+  <link rel="stylesheet"
+    href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css" />
   <style>
     .position-relative {
       position: relative;
@@ -113,15 +114,25 @@
               }
             }
           },
+          {
+            name: 'Bool Col',
+            editable: {
+              input: 'select',
+              options: [
+                true,
+                false
+              ]
+            }
+          },
           {
             name: 'Actions',
-            template: function(row) {
+            template: function (row) {
               return "<td><button data-action='edit'><i class='fa fa-trash'></i></button></td>"
             },
           }
         ],
         edit: {
-          done: function() {
+          done: function () {
             // test.ok(true, 'must call twice')
           }
         },
@@ -152,6 +163,8 @@
           $(".edit-fh table > tbody > tr:nth-child(3) > td:nth-child(3) > input").val('-90').trigger('change')
           // save row
           $('.edit button').click()
+          test.equals($('div.formhandler tbody > tr:nth-child(2) > td:nth-child(7) > select').val(), "false")
+          test.equals($('div.formhandler tbody > tr:nth-child(7) > td:nth-child(7) > select').val(), "true")
 
           test.equals($('.is-invalid').val(), '300000')
           $(".edit-fh table > tbody > tr:nth-child(1) > td:nth-child(3) > input").val('35').trigger('change')
@@ -168,7 +181,8 @@
           $(".edit-fh table > tbody > tr:nth-child(3) > td:nth-child(3) > input").val('28').trigger('change')
 
           $('.edit button').click()
-        setTimeout(function() {
+
+          setTimeout(function () {
             // COMMENTING NEXT TEST CASE: Gramex required
             // test.notOk($('.add button').prop('disabled'))
             // test.equals($('.edit-btn').text(), 'Edit')

test/test-formhandler.html

@@ -271,7 +271,7 @@
         })
         .on('load', function () {
           // no. of columns in meta data must be same as rendered columns
-          t.equal($('.fh6 thead tr th').length, 18)
+          t.equal($('.fh6 thead tr th').length, 19)
           // there should not be a column with name 'Continent'
           t.notOk($('.fh6 thead tr').text().match(/Continent/))
           // there shoudl be a column with name 'CustomTitle'
@@ -295,14 +295,14 @@
         .on('load', function () {
           current_class_count += 1
           // no. of columns in meta data must be same as rendered columns
-          t.equal($('.test_star_overrride thead tr th').length, 18 * current_class_count)
+          t.equal($('.test_star_overrride thead tr th').length, 19 * current_class_count)
           // there should not be a column with name 'Continent'
           t.notOk($('.test_star_overrride thead tr').text().match(/Continent/))
           // there shoudl be a column with name 'CustomTitle'
           t.ok($('.test_star_overrride thead tr').text().match(/CustomTitle/))
           t.equal($('.test_star_overrride thead tr').text().match(/CustomTitle/).length, 1)
           // Rest of 16 columns must have title as 'SameName'
-          t.equal($('.test_star_overrride thead tr').text().split('SameName').length - 1, 17 * current_class_count)
+          t.equal($('.test_star_overrride thead tr').text().split('SameName').length - 1, 18 * current_class_count)
           // column is hideable by default
           t.equal($('.test_star_overrride [data-col="Continent"] div:nth-child(1) div a:last-of-type').text().trim(), "Hide".repeat(current_class_count))
         })
@@ -1075,7 +1075,7 @@
       })
       .on('load', function () {
         init_class_count += 1
-        t.ok($('.test-star-without-title table thead th a.dropdown-toggle').length == 18 * init_class_count)
+        t.ok($('.test-star-without-title table thead th a.dropdown-toggle').length == 19 * init_class_count)
       })
     })