From 2c47718a4ac0562f3780b8de5f959d67d58b7c5f Mon Sep 17 00:00:00 2001
From: Edmundo Ruiz Ghanem <edmundo@airbyte.io>
Date: Wed, 27 Apr 2022 11:18:07 -0400
Subject: [PATCH] Ensure input component can be assigned type

---
 .../src/components/base/Input/Input.test.tsx         | 12 +++++++++++-
 airbyte-webapp/src/components/base/Input/Input.tsx   |  3 ++-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/airbyte-webapp/src/components/base/Input/Input.test.tsx b/airbyte-webapp/src/components/base/Input/Input.test.tsx
index 2b70069abcfb..8377b6566622 100644
--- a/airbyte-webapp/src/components/base/Input/Input.test.tsx
+++ b/airbyte-webapp/src/components/base/Input/Input.test.tsx
@@ -5,13 +5,23 @@ import { Input } from "./Input";
 describe("<Input />", () => {
   test("renders text input", () => {
     const value = "aribyte@example.com";
-    const { getByTestId, queryByTestId } = render(<Input defaultValue={value} />);
+    const { getByTestId, queryByTestId } = render(<Input type="text" defaultValue={value} />);
 
     expect(getByTestId("input")).toHaveAttribute("type", "text");
     expect(getByTestId("input")).toHaveValue(value);
     expect(queryByTestId("toggle-password-visibility-button")).toBeFalsy();
   });
 
+  test("renders other type of input", () => {
+    const type = "number";
+    const value = 888;
+    const { getByTestId, queryByTestId } = render(<Input type={type} defaultValue={value} />);
+
+    expect(getByTestId("input")).toHaveAttribute("type", type);
+    expect(getByTestId("input")).toHaveValue(value);
+    expect(queryByTestId("toggle-password-visibility-button")).toBeFalsy();
+  });
+
   test("renders password input with visibilty button", () => {
     const value = "eight888";
     const { getByTestId, getByRole } = render(<Input type="password" defaultValue={value} />);
diff --git a/airbyte-webapp/src/components/base/Input/Input.tsx b/airbyte-webapp/src/components/base/Input/Input.tsx
index 694f72face40..62a40a873886 100644
--- a/airbyte-webapp/src/components/base/Input/Input.tsx
+++ b/airbyte-webapp/src/components/base/Input/Input.tsx
@@ -82,13 +82,14 @@ const Input: React.FC<InputProps> = (props) => {
 
   const isPassword = props.type === "password";
   const isVisibilityButtonVisible = isPassword && !props.disabled;
+  const type = isPassword ? (isContentVisible ? "text" : "password") : props.type;
   const onInputFocusChange = () => toggleFocused();
 
   return (
     <InputContainer {...props} className={focused ? "input-container--focused" : undefined}>
       <InputComponent
         {...props}
-        type={!isPassword || isContentVisible ? "text" : "password"}
+        type={type}
         isPassword={isPassword}
         onFocus={onInputFocusChange}
         onBlur={onInputFocusChange}