fix: input type is number for numbers

brmighell · Dec 6, 2021 · df9e325 · df9e325
1 parent eeff9d3
commit df9e325
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 14 deletions.
diff --git a/data-table/__tests__/table.js b/data-table/__tests__/table.js
@@ -563,22 +563,24 @@ describe('Serialization', () => {
 
     test('Default serialization', () => {
         expect(table.toJSON('div-id')).toEqual(JSON.stringify({
-            "version":1,
+            "version": 1,
             "rowNames": [""],
             "columnNames": [],
-            "data": [[{"Value":null,"Status":"Active"}]]
+            "data": [[{"Value": null, "Status": "Active"}]]
         }));
     });
 
-    test('Serialization of comma-separated number', () => {
-        cell0 = document.getElementById('div-id_row_1_and_col_1_and_field_0_')
-        cell0.value = '1,000'
-        cell0.dispatchEvent(new Event('focusout'));
-        expect(table.toJSON('div-id')).toEqual(JSON.stringify({
-            "version":1,
-            "rowNames": [""],
-            "columnNames": [],
-            "data": [[{"Value":1000,"Status":"Active"}]]
-        }));
+    test('Ensure number field doesn\'t allow commas', () => {
+        document.getElementById('div-id_row_1_and_col_1_and_field_0_').value = '1,000'
+        const serialized = table.toJSON('div-id');
+        const numValue = JSON.parse(serialized).data[0][0].Value;
+        expect(numValue).toEqual(null);
+    });
+
+    test('Ensure number field correctly serializes', () => {
+        document.getElementById('div-id_row_1_and_col_1_and_field_0_').value = '1000'
+        const serialized = table.toJSON('div-id');
+        const numValue = JSON.parse(serialized).data[0][0].Value;
+        expect(numValue).toEqual(1000);
     });
 });
diff --git a/data-table/table.js b/data-table/table.js
@@ -346,13 +346,20 @@ function createEntryCell(config, row, rowIndex, colIndex) {
 
         let field = null;
         let listener = null; // Each input type wants a different listener'focusout'; // usually we wan't a focusout, but not on dropdown
-        if (type === Number || type === String) {
+        if (type === String) {
             let input = document.createElement("INPUT");
             input.type = 'text';
             input.placeholder = config.datumConfig.values[fieldNum];
             input.classList.add('dt_cell-input');
             field = input;
             listener = 'focusout';
+        } else if (type === Number) {
+            let input = document.createElement("INPUT");
+            input.type = 'number';
+            input.placeholder = config.datumConfig.values[fieldNum];
+            input.classList.add('dt_cell-input');
+            field = input;
+            listener = 'focusout';
         } else if (type === Boolean) {
             let input = document.createElement("INPUT");
             input.type = 'checkbox';

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "usfca-data-table",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "data table test",
   "main": "data-table/table.js",
   "directories": {