From 0a42341a5c47594f11ffec76247a65c1307f7481 Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Fri, 22 Nov 2024 17:13:49 -0300
Subject: [PATCH] feat: disable browser autocomplete on popover input fields
 (#4573)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* ✨ (inputComponent): add 'autoComplete="off"' attribute to input components in popover and popoverObject to disable browser auto-fill feature

* ✨ (dropdownComponent/index.tsx): add autoComplete="off" attribute to input field to disable browser autocomplete feature

* ✨ (flowSidebarComponent/index.tsx): add 'autoComplete="off"' attribute to the search input field to disable browser autocomplete feature

* 📝 (inputComponent): Remove autoComplete="off" attribute from Input components to enable browser autocomplete feature
📝 (ui/input): Remove autoComplete="off" attribute from input element to enable browser autocomplete feature
📝 (extraSidebarComponent): Remove autoComplete="off" attribute from input element to enable browser autocomplete feature
📝 (flowSidebarComponent): Remove autoComplete="off" attribute from Input component to enable browser autocomplete feature

---------

Co-authored-by: anovazzi1 <otavio2204@gmail.com>
---
 src/frontend/src/components/dropdownComponent/index.tsx          | 1 +
 .../src/components/inputComponent/components/popover/index.tsx   | 1 +
 src/frontend/src/components/ui/input.tsx                         | 1 +
 .../pages/FlowPage/components/extraSidebarComponent/index.tsx    | 1 -
 4 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/frontend/src/components/dropdownComponent/index.tsx b/src/frontend/src/components/dropdownComponent/index.tsx
index 2c6f3214c..a60b1de4b 100644
--- a/src/frontend/src/components/dropdownComponent/index.tsx
+++ b/src/frontend/src/components/dropdownComponent/index.tsx
@@ -121,6 +121,7 @@ export default function Dropdown({
         onChange={searchRoleByTerm}
         placeholder="Search options..."
         className="flex h-9 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
+        autoComplete="off"
       />
     </div>
   );
diff --git a/src/frontend/src/components/inputComponent/components/popover/index.tsx b/src/frontend/src/components/inputComponent/components/popover/index.tsx
index ca1aa1cb6..5a071f388 100644
--- a/src/frontend/src/components/inputComponent/components/popover/index.tsx
+++ b/src/frontend/src/components/inputComponent/components/popover/index.tsx
@@ -114,6 +114,7 @@ const CustomInputPopover = ({
 
           {!selectedOption && (
             <input
+              autoComplete="off"
               onFocus={() => setIsFocused(true)}
               autoFocus={autoFocus}
               id={id}
diff --git a/src/frontend/src/components/ui/input.tsx b/src/frontend/src/components/ui/input.tsx
index 5fc871f09..3d6915b00 100644
--- a/src/frontend/src/components/ui/input.tsx
+++ b/src/frontend/src/components/ui/input.tsx
@@ -18,6 +18,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
             className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 transform text-muted-foreground"
           />
           <input
+            autoComplete="off"
             data-testid=""
             type={type}
             className={cn(
diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
index 993bd72f1..70d391ff7 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
@@ -191,7 +191,6 @@ export default function ExtraSidebar(): JSX.Element {
             // Set search input state
             setSearch(event.target.value);
           }}
-          autoComplete="off"
           readOnly
           onClick={() =>
             document?.getElementById("search")?.removeAttribute("readonly")