Improve zip code masking (#278)

CMSgov · Sep 25, 2018 · be561cc · be561cc
1 parent 0b42cee
commit be561cc
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 1 deletion.
diff --git a/packages/core/src/components/TextField/Mask.jsx b/packages/core/src/components/TextField/Mask.jsx
@@ -13,7 +13,7 @@ import React from 'react';
 const deliminatedMaskRegex = {
   phone: /(\d{3})(\d{1,3})?(\d+)?/,
   ssn: /([*\d]{3})([*\d]{1,2})?([*\d]+)?/,
-  zip: /(\d{5})(\d+)/
+  zip: /(\d{5})(\d*)/
 };
 
 /**

diff --git a/packages/core/src/components/TextField/Mask.test.jsx b/packages/core/src/components/TextField/Mask.test.jsx
@@ -247,6 +247,20 @@ describe('Mask', function() {
       expect(input.prop('value')).toBe('12345');
     });
 
+    it('accepts five-digits with bad extra chars', () => {
+      const data = render({ mask: 'zip' }, { value: '1234-5' });
+      const input = data.wrapper.find('input');
+
+      expect(input.prop('value')).toBe('12345');
+    });
+
+    it('accepts nine-digits with bad extra chars', () => {
+      const data = render({ mask: 'zip' }, { value: '1234-5-67-89' });
+      const input = data.wrapper.find('input');
+
+      expect(input.prop('value')).toBe('12345-6789');
+    });
+
     it('accepts nine-digit zip code', () => {
       const data = render({ mask: 'zip' }, { value: '123456789' });
       const input = data.wrapper.find('input');