fix: cannot empty the input (#10)

jorisre · Mar 17, 2022 · 80678af · 80678af
1 parent e1f07e0
commit 80678af
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 5 deletions.
diff --git a/src/index.test.tsx b/src/index.test.tsx
@@ -186,3 +186,35 @@ test('PhoneInput with ref', () => {
     ]
   `);
 });
+
+test('should empty the field', async () => {
+  const handleChange = vi.fn<[React.ChangeEvent<HTMLInputElement>], void>();
+
+  render(
+    <Phone onChange={handleChange} defaultCountry="fr">
+      <Phone.Country />
+      <Phone.Number placeholder="3 33 33 33 33" />
+    </Phone>
+  );
+
+  expect(handleChange).not.toHaveBeenCalled();
+
+  user.type(screen.getByPlaceholderText('3 33 33 33 33'), '334455667');
+  user.type(screen.getByPlaceholderText('3 33 33 33 33'), '{Backspace}');
+  user.type(screen.getByPlaceholderText('3 33 33 33 33'), '{Backspace}');
+  user.type(screen.getByPlaceholderText('3 33 33 33 33'), '{Backspace}');
+
+  expect(screen.getByPlaceholderText('3 33 33 33 33')).toHaveValue('3 34 45 5');
+
+  user.type(screen.getByPlaceholderText('3 33 33 33 33'), '{Backspace}');
+  user.type(screen.getByPlaceholderText('3 33 33 33 33'), '{Backspace}');
+
+  expect(screen.getByPlaceholderText('3 33 33 33 33')).toHaveValue('3 34 4');
+
+  user.type(screen.getByPlaceholderText('3 33 33 33 33'), '{Backspace}');
+  user.type(screen.getByPlaceholderText('3 33 33 33 33'), '{Backspace}');
+  user.type(screen.getByPlaceholderText('3 33 33 33 33'), '{Backspace}');
+  user.type(screen.getByPlaceholderText('3 33 33 33 33'), '{Backspace}');
+
+  expect(screen.getByPlaceholderText('3 33 33 33 33')).toBeEmptyDOMElement();
+});
diff --git a/src/index.tsx b/src/index.tsx
@@ -135,7 +135,8 @@ const _Number = forwardRef<
       value={_value.formatted}
       onChange={(e) => {
         props.onChange?.(e);
-        if (/\d+/.test(e.target.value)) {
+
+        if (/\d+|^$/.test(e.target.value)) {
           setValue(
             Object.assign({}, _value, {
               raw: '+' + _value.country[3] + removeMask(e.target.value),

diff --git a/src/utils.test.ts b/src/utils.test.ts
@@ -103,7 +103,7 @@ describe('splitPhoneNumber', () => {
 });
 
 test.each([
-  ['+33624157863', '33624157863'],
+  ['+33234567890', '33234567890'],
   ['(33) 33-33-33', '33333333'],
 ])('removeMask(%s) -> %s', (p, e) => expect(removeMask(p)).toBe(e));
 
@@ -125,8 +125,8 @@ test.each([
   ['123456', '.... ....', '1234 56'], // Fill as much as possible
   ['123456', '.... ..-..', '1234 56-'], // Stop at first missing digit
   ['123456', '.... ....-..', '1234 56'], // Stop at first missing digit
-  ['6 24 15 78 63', '. .. .. .. ..', '6 24 15 78 63'],
-  ['+33624157863', undefined, '+33624157863'],
+  ['6 12 34 56 78', '. .. .. .. ..', '6 12 34 56 78'],
+  ['+33234567890', undefined, '+33234567890'],
 ])('applyMask(%s, %s) -> %s', (p, m, e) => {
   expect(applyMask(p, m)).toBe(e);
 });
diff --git a/src/utils.ts b/src/utils.ts
@@ -10,7 +10,7 @@ export const removeMask = (value: string) => value.replace(/\D/g, '');
 export const applyMask = (value = '', mask?: string) => {
   if (!mask || !value) return value;
   const flatValue = removeMask(value).split('');
-  return mask.replace(/\./g, () => flatValue.shift() || '.').split('.')[0];
+  return mask.replace(/\./g, () => flatValue.shift() || '.').split('.')[0].trim();
 };
 
 export const isE164Compliant = (value: string) =>