feat(usePhoneInput): add an option to allow the longer numbers than mask

src/hooks/usePhoneInput.ts

@@ -99,6 +99,12 @@ export interface UsePhoneInputConfig {
    */
   disableFormatting?: boolean;
 
+  /**
+   * @description Allow phone value to be longer than the mask.
+   * @default false
+   */
+  enableLongNumbers?: boolean;
+
   /**
    * @description Callback that calls on phone change
    * @param data - New phone data.
@@ -134,6 +140,7 @@ export const defaultConfig: Required<
   forceDialCode: false,
   disableDialCodeAndPrefix: false,
   disableFormatting: false,
+  enableLongNumbers: false,
   countries: defaultCountries,
   preferredCountries: [],
 };
@@ -151,6 +158,7 @@ export const usePhoneInput = ({
   forceDialCode: forceDialCodeConfig = defaultConfig.forceDialCode,
   disableDialCodeAndPrefix = defaultConfig.disableDialCodeAndPrefix,
   disableFormatting = defaultConfig.disableFormatting,
+  enableLongNumbers = defaultConfig.enableLongNumbers,
   onChange,
   inputRef: inputRefProp,
 }: UsePhoneInputConfig) => {
@@ -166,6 +174,7 @@ export const usePhoneInput = ({
     defaultMask,
     countryGuessingEnabled,
     disableFormatting,
+    enableLongNumbers,
   };
 
   const ref = useRef<HTMLInputElement | null>(null);

src/utils/common/__tests__/applyMask.test.ts

@@ -114,4 +114,17 @@ describe('applyMask', () => {
       '(1234',
     );
   });
+
+  test('should handle enableLongNumbers option', () => {
+    const maskConfig = {
+      value: '123456789',
+      mask: '(....) .. ..',
+      maskSymbol: '.',
+    };
+
+    expect(applyMask(maskConfig)).toBe('(1234) 56 78');
+    expect(applyMask({ ...maskConfig, enableLongNumbers: true })).toBe(
+      '123456789',
+    );
+  });
 });

src/utils/common/applyMask.ts

@@ -22,6 +22,16 @@ interface ApplyMaskArgs {
    * if false -> "(1234) "
    */
   trimNonMaskCharsLeftover?: boolean;
+
+  /**
+   * @description Ignores masking for numbers longer than the mask
+   * @example
+   * value: "123456789"
+   * mask: "(....) ...."
+   * if true -> "123456789"
+   * if false -> "(1234) 5678"
+   */
+  enableLongNumbers?: boolean;
 }
 
 export const applyMask = ({
@@ -30,8 +40,11 @@ export const applyMask = ({
   maskSymbol,
   offset = 0,
   trimNonMaskCharsLeftover = false,
+  enableLongNumbers = false,
 }: ApplyMaskArgs): string => {
   if (value.length < offset) return value;
+  if (enableLongNumbers && value.length > mask.split('.').length - 1)
+    return value;
 
   const savedValuePart = value.slice(0, offset);
   const valueToMask = value.slice(offset);

src/utils/handlePhoneChange.ts

@@ -15,6 +15,7 @@ export interface PhoneFormattingConfig {
   defaultMask: string;
   countryGuessingEnabled: boolean;
   disableFormatting: boolean;
+  enableLongNumbers: boolean;
 }
 
 interface HandlePhoneChangeProps extends PhoneFormattingConfig {

src/utils/handleUserInput.ts

@@ -32,6 +32,7 @@ export const handleUserInput = (
     countryGuessingEnabled,
     defaultMask,
     disableFormatting,
+    enableLongNumbers,
     countries,
   }: HandleUserInputOptions,
 ): {
@@ -130,6 +131,7 @@ export const handleUserInput = (
     forceDialCode,
     disableDialCodeAndPrefix,
     disableFormatting,
+    enableLongNumbers,
     defaultMask,
   });
 

src/utils/phoneUtils/formatPhone.ts

@@ -32,6 +32,10 @@ export interface FormatPhoneConfig {
    * Trim all non-digit values from the end of the result
    */
   trimNonDigitsEnd?: boolean;
+  /**
+   * allow to handle long numbers in the input value.
+   */
+  enableLongNumbers?: boolean;
 }
 
 export const formatPhone = (
@@ -137,6 +141,7 @@ export const formatPhone = (
     trimNonMaskCharsLeftover:
       config.trimNonDigitsEnd ||
       (config.disableDialCodeAndPrefix && phoneRightSide.length === 0),
+    enableLongNumbers: config.enableLongNumbers,
   });
 
   if (config.disableDialCodeAndPrefix) {