Improve behavior of password input field (airbytehq#16011)

* Improve behavior of password input field

* Show / hide button now focuses back on the text at the previous cursor location
* On comonent blur, it hides the information again

* Fix logic on input blur

* Add hide password on blur test to input

* Clear the input selection start on blur

* Remove defaultFocus and replace with autoFocus

Author: edmundito

airbyte-webapp/src/components/base/Input/Input.test.tsx

@@ -1,4 +1,5 @@
-import { fireEvent } from "@testing-library/react";
+import { fireEvent, waitFor } from "@testing-library/react";
+import { act } from "react-dom/test-utils";
 
 import { render } from "utils/testutils";
 
@@ -39,11 +40,68 @@ describe("<Input />", () => {
 
     getByTestId("toggle-password-visibility-button")?.click();
 
-    expect(getByTestId("input")).toHaveAttribute("type", "text");
-    expect(getByTestId("input")).toHaveValue(value);
+    const inputEl = getByTestId("input") as HTMLInputElement;
+
+    expect(inputEl).toHaveAttribute("type", "text");
+    expect(inputEl).toHaveValue(value);
+    expect(inputEl.selectionStart).toBe(value.length);
     expect(getByRole("img", { hidden: true })).toHaveAttribute("data-icon", "eye-slash");
   });
 
+  test("showing password should remember cursor position", async () => {
+    const value = "eight888";
+    const selectionStart = Math.round(value.length / 2);
+
+    const { getByTestId } = await render(<Input type="password" defaultValue={value} />);
+    const inputEl = getByTestId("input") as HTMLInputElement;
+
+    act(() => {
+      inputEl.selectionStart = selectionStart;
+    });
+
+    getByTestId("toggle-password-visibility-button")?.click();
+
+    expect(inputEl.selectionStart).toBe(selectionStart);
+  });
+
+  test("hides password on blur", async () => {
+    const value = "eight888";
+    const { getByTestId, getByRole } = await render(<Input type="password" defaultValue={value} />);
+
+    getByTestId("toggle-password-visibility-button").click();
+
+    const inputEl = getByTestId("input");
+
+    expect(inputEl).toHaveFocus();
+    act(() => inputEl.blur());
+
+    await waitFor(() => {
+      expect(inputEl).toHaveAttribute("type", "password");
+      expect(getByRole("img", { hidden: true })).toHaveAttribute("data-icon", "eye");
+    });
+  });
+
+  test("cursor position should be at the end after blur and and clicking on show password button", async () => {
+    const value = "eight888";
+    const { getByTestId } = await render(<Input type="password" defaultValue={value} />);
+    const inputEl = getByTestId("input") as HTMLInputElement;
+
+    getByTestId("toggle-password-visibility-button").click();
+    expect(inputEl).toHaveFocus();
+    act(() => {
+      inputEl.selectionStart = value.length / 2;
+      inputEl.blur();
+    });
+
+    await waitFor(() => {
+      expect(inputEl).toHaveAttribute("type", "password");
+    });
+
+    getByTestId("toggle-password-visibility-button").click();
+    expect(inputEl).toHaveFocus();
+    expect(inputEl.selectionStart).toBe(value.length);
+  });
+
   test("should trigger onChange once", async () => {
     const onChange = jest.fn();
     const { getByTestId } = await render(<Input onChange={onChange} />);

airbyte-webapp/src/components/base/Input/Input.tsx

@@ -1,7 +1,7 @@
 import { faEye, faEyeSlash } from "@fortawesome/free-regular-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import classNames from "classnames";
-import React, { useEffect, useRef, useState } from "react";
+import React, { useCallback, useRef, useState } from "react";
 import { useIntl } from "react-intl";
 import { useToggle } from "react-use";
 import styled from "styled-components";
@@ -24,7 +24,6 @@ const getBackgroundColor = (props: IStyleProps) => {
 export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
   error?: boolean;
   light?: boolean;
-  defaultFocus?: boolean;
 }
 
 const InputContainer = styled.div<InputProps>`
@@ -83,46 +82,76 @@ const VisibilityButton = styled(Button)`
   border: none;
 `;
 
-const Input: React.FC<InputProps> = ({ defaultFocus = false, onFocus, onBlur, ...props }) => {
+const Input: React.FC<InputProps> = ({ ...props }) => {
   const { formatMessage } = useIntl();
+
   const inputRef = useRef<HTMLInputElement | null>(null);
-  const [isContentVisible, setIsContentVisible] = useToggle(false);
+  const buttonRef = useRef<HTMLButtonElement | null>(null);
+  const inputSelectionStartRef = useRef<number | null>(null);
+
+  const [isContentVisible, toggleIsContentVisible] = useToggle(false);
   const [focused, setFocused] = useState(false);
 
   const isPassword = props.type === "password";
   const isVisibilityButtonVisible = isPassword && !props.disabled;
   const type = isPassword ? (isContentVisible ? "text" : "password") : props.type;
 
-  useEffect(() => {
-    if (defaultFocus && inputRef.current !== null) {
-      inputRef.current.focus();
+  const focusOnInputElement = useCallback(() => {
+    if (!inputRef.current) {
+      return;
+    }
+
+    const { current: element } = inputRef;
+    const selectionStart = inputSelectionStartRef.current ?? inputRef.current?.value.length;
+
+    element.focus();
+
+    if (selectionStart) {
+      // Update input cursor position to where it was before
+      window.setTimeout(() => {
+        element.setSelectionRange(selectionStart, selectionStart);
+      }, 0);
+    }
+  }, []);
+
+  const onContainerFocus: React.FocusEventHandler<HTMLDivElement> = () => {
+    setFocused(true);
+  };
+
+  const onContainerBlur: React.FocusEventHandler<HTMLDivElement> = (event) => {
+    if (isVisibilityButtonVisible && event.target === inputRef.current) {
+      // Save the previous selection
+      inputSelectionStartRef.current = inputRef.current.selectionStart;
+    }
+
+    setFocused(false);
+
+    if (isPassword) {
+      window.setTimeout(() => {
+        if (document.activeElement !== inputRef.current && document.activeElement !== buttonRef.current) {
+          toggleIsContentVisible(false);
+          inputSelectionStartRef.current = null;
+        }
+      }, 0);
     }
-  }, [inputRef, defaultFocus]);
+  };
 
   return (
     <InputContainer
       className={classNames("input-container", { "input-container--focused": focused })}
       data-testid="input-container"
+      onFocus={onContainerFocus}
+      onBlur={onContainerBlur}
     >
-      <InputComponent
-        data-testid="input"
-        {...props}
-        ref={inputRef}
-        type={type}
-        isPassword={isPassword}
-        onFocus={(event) => {
-          setFocused(true);
-          onFocus?.(event);
-        }}
-        onBlur={(event) => {
-          setFocused(false);
-          onBlur?.(event);
-        }}
-      />
+      <InputComponent data-testid="input" {...props} ref={inputRef} type={type} isPassword={isPassword} />
       {isVisibilityButtonVisible ? (
         <VisibilityButton
+          ref={buttonRef}
           iconOnly
-          onClick={() => setIsContentVisible()}
+          onClick={() => {
+            toggleIsContentVisible();
+            focusOnInputElement();
+          }}
           type="button"
           aria-label={formatMessage({
             id: `ui.input.${isContentVisible ? "hide" : "show"}Password`,

airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/ConnectionName.tsx

@@ -79,7 +79,7 @@ const ConnectionName: React.FC<ConnectionNameProps> = ({ connection }) => {
               onEscape={onEscape}
               onEnter={onEnter}
               disabled={loading}
-              defaultFocus
+              autoFocus
             />
           </div>
         </div>