From 63bb33a38bcdc1270fea3a6379ec89d0d28bc12d Mon Sep 17 00:00:00 2001
From: Tay Sui Sin <suisin@regentmarkets.com>
Date: Thu, 7 Nov 2024 18:25:25 +0800
Subject: [PATCH] fix: make InputPhoneNumber not following any format in
 default

---
 lib/components/Input/base/index.tsx           |  2 +-
 .../input-phone-number.test.tsx.snap          |  5 ++---
 .../__tests__/input-phone-number.test.tsx     | 22 +++++--------------
 .../Input/input-phone-number/index.tsx        |  7 ------
 .../input-phone-number.stories.tsx            |  4 ++++
 5 files changed, 13 insertions(+), 27 deletions(-)

diff --git a/lib/components/Input/base/index.tsx b/lib/components/Input/base/index.tsx
index 79b020ed..b6e01329 100644
--- a/lib/components/Input/base/index.tsx
+++ b/lib/components/Input/base/index.tsx
@@ -269,7 +269,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
                                         {leftPlaceholder}
                                     </Text>
                                 )}
-                            {formatProps ? (
+                            {formatProps?.format ? (
                                 <PatternFormat
                                     {...commonProps}
                                     {...formatProps}
diff --git a/lib/components/Input/input-phone-number/__tests__/__snapshots__/input-phone-number.test.tsx.snap b/lib/components/Input/input-phone-number/__tests__/__snapshots__/input-phone-number.test.tsx.snap
index c95740a5..28ef4100 100644
--- a/lib/components/Input/input-phone-number/__tests__/__snapshots__/input-phone-number.test.tsx.snap
+++ b/lib/components/Input/input-phone-number/__tests__/__snapshots__/input-phone-number.test.tsx.snap
@@ -68,9 +68,8 @@ exports[`InputPhoneNumber Component should match the snapshot 1`] = `
             <input
               class="input peer input__align--left input__size--lg"
               id="quill-input-1"
-              inputmode="numeric"
-              placeholder="00 0000 0000"
-              type="text"
+              placeholder=" "
+              type="tel"
               value=""
             />
           </div>
diff --git a/lib/components/Input/input-phone-number/__tests__/input-phone-number.test.tsx b/lib/components/Input/input-phone-number/__tests__/input-phone-number.test.tsx
index 8f5b653a..699db314 100644
--- a/lib/components/Input/input-phone-number/__tests__/input-phone-number.test.tsx
+++ b/lib/components/Input/input-phone-number/__tests__/input-phone-number.test.tsx
@@ -24,19 +24,9 @@ describe("InputPhoneNumber Component", () => {
         expect(asFragment()).toMatchSnapshot();
     });
 
-    it("should render correctly with default props", () => {
-        const { getByPlaceholderText } = render(
-            <InputPhoneNumber {...defaultProps} />,
-        );
-        const input = getByPlaceholderText("00 0000 0000");
-        expect(input).toBeInTheDocument();
-    });
-
     it("should call onValueChange when input value changes", () => {
-        const { getByPlaceholderText } = render(
-            <InputPhoneNumber {...defaultProps} />,
-        );
-        const input = getByPlaceholderText("00 0000 0000");
+        const { getByRole } = render(<InputPhoneNumber {...defaultProps} />);
+        const input = getByRole("textbox");
 
         fireEvent.change(input, { target: { value: "1234567890" } });
         expect(defaultProps.onValueChange).toHaveBeenCalledWith("+11234567890");
@@ -62,14 +52,14 @@ describe("InputPhoneNumber Component", () => {
     });
 
     it("should update phone code and input value state", () => {
-        const { getByText, getByPlaceholderText } = render(
+        const { getByText, getByRole } = render(
             <InputPhoneNumber
                 {...defaultProps}
                 shortCode="US"
                 codeLabel="Code"
             />,
         );
-        const input = getByPlaceholderText("00 0000 0000");
+        const input = getByRole("textbox");
         const dropdownButton = getByText("Code");
 
         fireEvent.click(dropdownButton);
@@ -85,7 +75,7 @@ describe("InputPhoneNumber Component", () => {
     });
 
     it("should render custom props correctly", () => {
-        const { getByPlaceholderText } = render(
+        const { getByRole } = render(
             <InputPhoneNumber
                 inputSize="sm"
                 {...defaultProps}
@@ -93,7 +83,7 @@ describe("InputPhoneNumber Component", () => {
                 placeholder="Enter your phone number"
             />,
         );
-        const input = getByPlaceholderText("Enter your phone number");
+        const input = getByRole("textbox");
         expect(input).toBeInTheDocument();
     });
 });
diff --git a/lib/components/Input/input-phone-number/index.tsx b/lib/components/Input/input-phone-number/index.tsx
index fd93d076..56a043fb 100644
--- a/lib/components/Input/input-phone-number/index.tsx
+++ b/lib/components/Input/input-phone-number/index.tsx
@@ -40,11 +40,6 @@ const InputPhoneNumberContent = forwardRef<
             fillAddonBorderColor,
             countryCodes,
             shortCode,
-            placeholder = "00 0000 0000",
-            formatProps = {
-                format: "## #### ####",
-                mask: "",
-            },
             onCodeChange,
             onValueChange,
             showFlags = true,
@@ -129,12 +124,10 @@ const InputPhoneNumberContent = forwardRef<
                 <Input
                     type="tel"
                     value={inputValue}
-                    placeholder={placeholder}
                     addOn={codeAddOn}
                     inputSize={inputSize}
                     status={status}
                     variant={variant}
-                    formatProps={formatProps}
                     onChange={handleInputChange}
                     isDropdownOpen={isOpen}
                     disabled={disabled}
diff --git a/lib/components/Input/input-phone-number/input-phone-number.stories.tsx b/lib/components/Input/input-phone-number/input-phone-number.stories.tsx
index c3ca59c2..f212288f 100644
--- a/lib/components/Input/input-phone-number/input-phone-number.stories.tsx
+++ b/lib/components/Input/input-phone-number/input-phone-number.stories.tsx
@@ -67,6 +67,10 @@ const meta = {
         fieldMarker: false,
         show_counter: false,
         shortCode: "au",
+        formatProps: {
+            format: "",
+            mask: "",
+        },
         fillAddonBorderColor:
             "var(--semantic-color-slate-solid-surface-frame-mid)",
         countryCodes: dummyList,