Fix #879, Treat empty mask as space.

Author: s-yadav

example/src/index.js

@@ -161,6 +161,7 @@ class App extends React.Component {
     return (
       <div>
         <div className="example">
+          
           <h3>Prefix and thousand separator : Format currency as text</h3>
           <NumericFormat value={2456981} displayType="text" thousandSeparator={true} prefix="$" />
         </div>
@@ -172,6 +173,12 @@ class App extends React.Component {
 
         <div className="example">
           <h3>Custom renderText method</h3>
+          <PatternFormat
+            format="+359 ### ### ###"
+            onValueChange={console.log}
+            mask=""         
+            />
+
           <PatternFormat
             value={4111111111111111}
             displayType="text"

src/pattern_format.tsx

@@ -16,7 +16,9 @@ export function format<BaseType = InputAttributes>(
   props: PatternFormatProps<BaseType>,
 ) {
   const format = props.format as string;
-  const { allowEmptyFormatting, mask, patternChar = '#' } = props;
+  const { allowEmptyFormatting, patternChar = '#' } = props;
+  // treat empty string mask same as space, as empty string mask will break the format
+  const mask = !props.mask ? ' ' : props.mask;
 
   if (numStr === '' && !allowEmptyFormatting) return '';
 
@@ -174,7 +176,7 @@ export function usePatternFormat<BaseType = InputAttributes>(
 ): NumberFormatBaseProps<BaseType> {
   const {
     /* eslint-disable no-unused-vars */
-    mask,
+    mask: maskProp,
     allowEmptyFormatting,
     /* eslint-enable no-unused-vars */
     format: formatProp,
@@ -247,7 +249,9 @@ export function usePatternFormat<BaseType = InputAttributes>(
   const _value = isNil(value) ? defaultValue : value;
   const isValueNumericString = valueIsNumericString ?? isNumericString(_value, formatProp);
 
-  const _props = { ...props, valueIsNumericString: isValueNumericString };
+  // treat empty string mask same as space, as empty string mask will break the format
+  const mask = !maskProp ? ' ' : maskProp;
+  const _props = { ...props, mask, valueIsNumericString: isValueNumericString };
 
   return {
     ...(restProps as NumberFormatBaseProps<BaseType>),

test/library/input.spec.jsx

@@ -311,6 +311,29 @@ describe('NumberFormat as input', () => {
     expect(input).toHaveValue('1334_');
   });
 
+  it('should treat mask="" as mask=" "', async () => {
+    const { input } = await render(<PatternFormat format="+359 ### ### ###" mask="" allowEmptyFormatting />);
+    expect(input).toHaveValue('+359            ');
+  });
+
+
+  it('should give proper value with mask="" and numeric prefix in format #879', async () => {
+    const spy = vi.fn();
+    const { input, user } = await render(
+      <PatternFormat format="+359 ### ### ###" onValueChange={spy} mask="" />,
+    );
+
+    await simulateKeyInput(user, input, '2', 5);
+
+    expect(spy).toHaveBeenCalled();
+    expect(spy.mock.lastCall[0]).toEqual({
+      formattedValue: '+359 2          ',
+      value: '2',
+      floatValue: 2,
+    });
+  });
+
+
   it('should allow replacing all characters with number when formatting is present for NumericFormats', async () => {
     //check for numeric input
     const value = '12.000';