Add trailing zeros to cents when focus moves

js/components/text_input.js

@@ -1,5 +1,6 @@
 import MaskedInput, { conformToMask } from 'vue-text-mask'
 import inputValidations from '../lib/input_validations'
+import { formatDollars } from '../lib/dollars'
 
 export default {
   name: 'textinput',
@@ -78,6 +79,9 @@ export default {
     onChange: function(e) {
       // Only invalidate the field when it blurs
       this._checkIfValid({ value: e.target.value, invalidate: true })
+      if (this.validation === 'dollars') {
+        this.value = formatDollars(this._rawValue(e.target.value))
+      }
     },
 
     //

js/lib/dollars.js

@@ -4,6 +4,11 @@ export const formatDollars = (value, cents = true) => {
       style: 'currency',
       currency: 'USD',
     })
+  } else if (typeof value === 'string') {
+    return parseFloat(value).toLocaleString('us-US', {
+      style: 'currency',
+      currency: 'USD',
+    })
   }
   return ''
 }

tests/test_filters.py

@@ -7,11 +7,11 @@ from atst.models import AuditEvent
 @pytest.mark.parametrize(
     "input,expected",
     [
-        ("0", "$0"),
-        ("123.00", "$123"),
-        ("1234567", "$1,234,567"),
-        ("-1234", "$-1,234"),
-        ("one", "$0"),
+        ("0", "$0.00"),
+        ("123.00", "$123.00"),
+        ("1234567", "$1,234,567.00"),
+        ("-1234", "$-1,234.00"),
+        ("one", "$0.00"),
     ],
 )
 def test_dollar_fomatter(input, expected):