WETGPCII-2788-trailing-decimal-truncation

packages/design-system/src/components/TextField/Mask.test.tsx

@@ -63,7 +63,7 @@ describe('Mask', function () {
     const input = screen.getByRole('textbox');
     expect(input.classList).toContain('ds-c-field--currency');
     expect(input).toHaveAttribute('type', 'text');
-    expect(input).toHaveAttribute('pattern', '[0-9.,-]*');
+    expect(input).toHaveAttribute('pattern', '[0-9\\.\\,\\-]*');
     expect(input).toHaveAttribute('inputmode', 'numeric');
   });
 

packages/design-system/src/components/TextField/Mask.tsx

@@ -10,7 +10,7 @@ const maskPattern = {
   phone: '[0-9-]*',
   ssn: '[0-9-*]*',
   zip: '[0-9-]*',
-  currency: '[0-9.,-]*',
+  currency: '[0-9\\.\\,\\-]*',
 };
 
 const maskOverlayContent = {
@@ -87,7 +87,7 @@ export class Mask extends PureComponent<MaskProps, any> {
    * @param {React.Element} field - Child TextField
    */
   handleBlur(evt: React.ChangeEvent<HTMLInputElement>, field: React.ReactElement): void {
-    const value = maskValue(evt.target.value, this.props.mask);
+    const value = (evt.target.value = maskValue(evt.target.value, this.props.mask));
 
     // We only debounce the onBlur when we know for sure that
     // this component will re-render (AKA when the value changes)
@@ -103,6 +103,10 @@ export class Mask extends PureComponent<MaskProps, any> {
       this.debouncedOnBlurEvent = evt;
     }
 
+    if (typeof field.props.onChange === 'function') {
+      field.props.onChange(evt);
+    }
+
     this.setState({
       value,
     });

packages/design-system/src/components/TextField/TextField.stories.tsx

@@ -60,9 +60,9 @@ const ControlledTemplate: Story = {
     // controlled or uncontrolled. The TextField itself is always controlled by our story,
     // but whether this story is controlled by args depends on whether the user has
     // supplied a new value of the `value` arg to this story.
-    const [localValue, setLocalValue] = useState();
+    const [localValue, setLocalValue] = useState<string>('');
     const value = args.value ?? localValue ?? '';
-    const onChange = (event) => {
+    const onChange = (event: React.FormEvent<HTMLInputElement>) => {
       action('onChange')(event);
       setLocalValue(event.currentTarget.value);
     };
@@ -105,6 +105,20 @@ const disabledArg = {
   },
 };
 
+export const MaskedCurrency: Story = {
+  ...ControlledTemplate,
+  args: {
+    name: 'mask-currency',
+    label: 'Enter your estimated yearly income.',
+    hint: 'This should be a dollar amount.',
+    mask: 'currency',
+    numeric: true,
+  },
+  argTypes: {
+    mask: disabledArg,
+  },
+};
+
 export const AllMaskedFields: Story = {
   argTypes: {
     labelMask: disabledArg,