feat: disable browser autocomplete on popover input fields (#4573)

* ✨ (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

@@ -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>
   );

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}

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(

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")