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 <[email protected]>
langflow-ai · Nov 22, 2024 · 0a42341 · 0a42341
1 parent 061971f
commit 0a42341
Show file tree

Hide file tree

Showing 4 changed files with 3 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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
@@ -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")