fix: make InputPhoneNumber not following any format in default

deriv-com · Nov 7, 2024 · 63bb33a · 63bb33a
1 parent f749c41
commit 63bb33a
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 27 deletions.
diff --git 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/...ponents/Input/input-phone-number/__tests__/__snapshots__/input-phone-number.test.tsx.snap b/...ponents/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
@@ -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,15 +75,15 @@ describe("InputPhoneNumber Component", () => {
     });
 
     it("should render custom props correctly", () => {
-        const { getByPlaceholderText } = render(
+        const { getByRole } = render(
             <InputPhoneNumber
                 inputSize="sm"
                 {...defaultProps}
                 status="error"
                 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
@@ -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
@@ -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,