diff --git a/packages/design-system/src/components/TextField/Mask.test.tsx b/packages/design-system/src/components/TextField/Mask.test.tsx index 6334f32132..5e42881630 100644 --- a/packages/design-system/src/components/TextField/Mask.test.tsx +++ b/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'); }); diff --git a/packages/design-system/src/components/TextField/Mask.tsx b/packages/design-system/src/components/TextField/Mask.tsx index be7de1d459..8db7c56277 100644 --- a/packages/design-system/src/components/TextField/Mask.tsx +++ b/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 { * @param {React.Element} field - Child TextField */ handleBlur(evt: React.ChangeEvent, 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 { this.debouncedOnBlurEvent = evt; } + if (typeof field.props.onChange === 'function') { + field.props.onChange(evt); + } + this.setState({ value, }); diff --git a/packages/design-system/src/components/TextField/TextField.stories.tsx b/packages/design-system/src/components/TextField/TextField.stories.tsx index fb91001c99..aac39abd75 100644 --- a/packages/design-system/src/components/TextField/TextField.stories.tsx +++ b/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(''); const value = args.value ?? localValue ?? ''; - const onChange = (event) => { + const onChange = (event: React.FormEvent) => { 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, diff --git a/tests/browser/snapshots/stories/components-textfield--masked-currency-cmsgov--Mobile-Chrome.png b/tests/browser/snapshots/stories/components-textfield--masked-currency-cmsgov--Mobile-Chrome.png new file mode 100644 index 0000000000..0b933d3f35 Binary files /dev/null and b/tests/browser/snapshots/stories/components-textfield--masked-currency-cmsgov--Mobile-Chrome.png differ diff --git a/tests/browser/snapshots/stories/components-textfield--masked-currency-cmsgov--chromium-forced-colors.png b/tests/browser/snapshots/stories/components-textfield--masked-currency-cmsgov--chromium-forced-colors.png new file mode 100644 index 0000000000..ec7befaa6a Binary files /dev/null and b/tests/browser/snapshots/stories/components-textfield--masked-currency-cmsgov--chromium-forced-colors.png differ diff --git a/tests/browser/snapshots/stories/components-textfield--masked-currency-cmsgov--chromium.png b/tests/browser/snapshots/stories/components-textfield--masked-currency-cmsgov--chromium.png new file mode 100644 index 0000000000..0740a6ec01 Binary files /dev/null and b/tests/browser/snapshots/stories/components-textfield--masked-currency-cmsgov--chromium.png differ diff --git a/tests/browser/snapshots/stories/components-textfield--masked-currency-cmsgov--firefox.png b/tests/browser/snapshots/stories/components-textfield--masked-currency-cmsgov--firefox.png new file mode 100644 index 0000000000..da1688485a Binary files /dev/null and b/tests/browser/snapshots/stories/components-textfield--masked-currency-cmsgov--firefox.png differ diff --git a/tests/browser/snapshots/stories/components-textfield--masked-currency-cmsgov--webkit.png b/tests/browser/snapshots/stories/components-textfield--masked-currency-cmsgov--webkit.png new file mode 100644 index 0000000000..951c863ab9 Binary files /dev/null and b/tests/browser/snapshots/stories/components-textfield--masked-currency-cmsgov--webkit.png differ diff --git a/tests/browser/snapshots/stories/components-textfield--masked-currency-core--Mobile-Chrome.png b/tests/browser/snapshots/stories/components-textfield--masked-currency-core--Mobile-Chrome.png new file mode 100644 index 0000000000..0b933d3f35 Binary files /dev/null and b/tests/browser/snapshots/stories/components-textfield--masked-currency-core--Mobile-Chrome.png differ diff --git a/tests/browser/snapshots/stories/components-textfield--masked-currency-core--chromium-forced-colors.png b/tests/browser/snapshots/stories/components-textfield--masked-currency-core--chromium-forced-colors.png new file mode 100644 index 0000000000..ec7befaa6a Binary files /dev/null and b/tests/browser/snapshots/stories/components-textfield--masked-currency-core--chromium-forced-colors.png differ diff --git a/tests/browser/snapshots/stories/components-textfield--masked-currency-core--chromium.png b/tests/browser/snapshots/stories/components-textfield--masked-currency-core--chromium.png new file mode 100644 index 0000000000..0740a6ec01 Binary files /dev/null and b/tests/browser/snapshots/stories/components-textfield--masked-currency-core--chromium.png differ diff --git a/tests/browser/snapshots/stories/components-textfield--masked-currency-core--firefox.png b/tests/browser/snapshots/stories/components-textfield--masked-currency-core--firefox.png new file mode 100644 index 0000000000..da1688485a Binary files /dev/null and b/tests/browser/snapshots/stories/components-textfield--masked-currency-core--firefox.png differ diff --git a/tests/browser/snapshots/stories/components-textfield--masked-currency-core--webkit.png b/tests/browser/snapshots/stories/components-textfield--masked-currency-core--webkit.png new file mode 100644 index 0000000000..951c863ab9 Binary files /dev/null and b/tests/browser/snapshots/stories/components-textfield--masked-currency-core--webkit.png differ diff --git a/tests/browser/snapshots/stories/components-textfield--masked-currency-healthcare--Mobile-Chrome.png b/tests/browser/snapshots/stories/components-textfield--masked-currency-healthcare--Mobile-Chrome.png new file mode 100644 index 0000000000..4fa6c9b169 Binary files /dev/null and b/tests/browser/snapshots/stories/components-textfield--masked-currency-healthcare--Mobile-Chrome.png differ diff --git a/tests/browser/snapshots/stories/components-textfield--masked-currency-healthcare--chromium-forced-colors.png b/tests/browser/snapshots/stories/components-textfield--masked-currency-healthcare--chromium-forced-colors.png new file mode 100644 index 0000000000..5c1557254d Binary files /dev/null and b/tests/browser/snapshots/stories/components-textfield--masked-currency-healthcare--chromium-forced-colors.png differ diff --git a/tests/browser/snapshots/stories/components-textfield--masked-currency-healthcare--chromium.png b/tests/browser/snapshots/stories/components-textfield--masked-currency-healthcare--chromium.png new file mode 100644 index 0000000000..0a3e75b8de Binary files /dev/null and b/tests/browser/snapshots/stories/components-textfield--masked-currency-healthcare--chromium.png differ diff --git a/tests/browser/snapshots/stories/components-textfield--masked-currency-healthcare--firefox.png b/tests/browser/snapshots/stories/components-textfield--masked-currency-healthcare--firefox.png new file mode 100644 index 0000000000..12f8ab35c4 Binary files /dev/null and b/tests/browser/snapshots/stories/components-textfield--masked-currency-healthcare--firefox.png differ diff --git a/tests/browser/snapshots/stories/components-textfield--masked-currency-healthcare--webkit.png b/tests/browser/snapshots/stories/components-textfield--masked-currency-healthcare--webkit.png new file mode 100644 index 0000000000..a4f7163dd9 Binary files /dev/null and b/tests/browser/snapshots/stories/components-textfield--masked-currency-healthcare--webkit.png differ diff --git a/tests/browser/snapshots/stories/components-textfield--masked-currency-medicare--Mobile-Chrome.png b/tests/browser/snapshots/stories/components-textfield--masked-currency-medicare--Mobile-Chrome.png new file mode 100644 index 0000000000..e55ef36f4b Binary files /dev/null and b/tests/browser/snapshots/stories/components-textfield--masked-currency-medicare--Mobile-Chrome.png differ diff --git a/tests/browser/snapshots/stories/components-textfield--masked-currency-medicare--chromium-forced-colors.png b/tests/browser/snapshots/stories/components-textfield--masked-currency-medicare--chromium-forced-colors.png new file mode 100644 index 0000000000..f049edda4e Binary files /dev/null and b/tests/browser/snapshots/stories/components-textfield--masked-currency-medicare--chromium-forced-colors.png differ diff --git a/tests/browser/snapshots/stories/components-textfield--masked-currency-medicare--chromium.png b/tests/browser/snapshots/stories/components-textfield--masked-currency-medicare--chromium.png new file mode 100644 index 0000000000..0d9b80db40 Binary files /dev/null and b/tests/browser/snapshots/stories/components-textfield--masked-currency-medicare--chromium.png differ diff --git a/tests/browser/snapshots/stories/components-textfield--masked-currency-medicare--firefox.png b/tests/browser/snapshots/stories/components-textfield--masked-currency-medicare--firefox.png new file mode 100644 index 0000000000..4d3da3ad1e Binary files /dev/null and b/tests/browser/snapshots/stories/components-textfield--masked-currency-medicare--firefox.png differ diff --git a/tests/browser/snapshots/stories/components-textfield--masked-currency-medicare--webkit.png b/tests/browser/snapshots/stories/components-textfield--masked-currency-medicare--webkit.png new file mode 100644 index 0000000000..b13abef033 Binary files /dev/null and b/tests/browser/snapshots/stories/components-textfield--masked-currency-medicare--webkit.png differ