From 004fdc84c6f2c3e0fac52152706aac5fd03a274b Mon Sep 17 00:00:00 2001
From: Devansh <dkansagra04@gmail.com>
Date: Tue, 22 Oct 2024 21:06:12 +0530
Subject: [PATCH] Fixed the issue of validating telephone number

---
 .../TelephoneInput/TelephoneInput.tsx         | 21 +++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/packages/fuselage/src/components/TelephoneInput/TelephoneInput.tsx b/packages/fuselage/src/components/TelephoneInput/TelephoneInput.tsx
index 0818b964d7..bef8802b91 100644
--- a/packages/fuselage/src/components/TelephoneInput/TelephoneInput.tsx
+++ b/packages/fuselage/src/components/TelephoneInput/TelephoneInput.tsx
@@ -1,5 +1,5 @@
 import type { ComponentProps, ReactNode, Ref } from 'react';
-import { forwardRef } from 'react';
+import { forwardRef, useState } from 'react';
 
 import { InputBox } from '../InputBox';
 
@@ -16,5 +16,22 @@ export const TelephoneInput = forwardRef(function TelephoneInput(
   props: TelephoneInputProps,
   ref: Ref<HTMLInputElement>
 ) {
-  return <InputBox type='tel' ref={ref} {...props} />;
+  const [value, setValue] = useState('');
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const telephonicValue = event.target.value;
+    if (/^[0-9()+]*$/.test(telephonicValue)) {
+      setValue(telephonicValue);
+    }
+  };
+
+  return (
+    <InputBox
+      type='tel'
+      ref={ref}
+      value={value}
+      onChange={handleChange}
+      {...props}
+    />
+  );
 });