From 7502434738c77d436365cfc511b4d10faa39e984 Mon Sep 17 00:00:00 2001
From: Emir Karabeg <emirkarabeg@berkeley.edu>
Date: Fri, 28 Feb 2025 17:50:40 -0800
Subject: [PATCH] improvement(ux): autocomplete off on envvars and toolbar

---
 .../components/environment/environment.tsx             | 10 +++++++++-
 app/w/components/toolbar/toolbar.tsx                   |  4 ++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/app/w/components/sidebar/components/settings-modal/components/environment/environment.tsx b/app/w/components/sidebar/components/settings-modal/components/environment/environment.tsx
index cdbc742862..4f4d2f1583 100644
--- a/app/w/components/sidebar/components/settings-modal/components/environment/environment.tsx
+++ b/app/w/components/sidebar/components/settings-modal/components/environment/environment.tsx
@@ -199,8 +199,12 @@ export function EnvironmentVariables({ onOpenChange }: EnvironmentVariablesProps
         value={envVar.key}
         onChange={(e) => updateEnvVar(index, 'key', e.target.value)}
         onPaste={(e) => handlePaste(e, index)}
-        placeholder="e.g. API_KEY"
+        placeholder="API_KEY"
         autoComplete="off"
+        autoCorrect="off"
+        autoCapitalize="off"
+        spellCheck="false"
+        name={`env-var-key-${envVar.id || index}-${Math.random()}`}
       />
       <Input
         data-input-type="value"
@@ -214,6 +218,10 @@ export function EnvironmentVariables({ onOpenChange }: EnvironmentVariablesProps
         placeholder="Enter value"
         className="allow-scroll"
         autoComplete="off"
+        autoCorrect="off"
+        autoCapitalize="off"
+        spellCheck="false"
+        name={`env-var-value-${envVar.id || index}-${Math.random()}`}
       />
       <Button variant="ghost" size="icon" onClick={() => removeEnvVar(index)} className="h-10 w-10">
         ×
diff --git a/app/w/components/toolbar/toolbar.tsx b/app/w/components/toolbar/toolbar.tsx
index ac46dfd080..e3ad6fe16a 100644
--- a/app/w/components/toolbar/toolbar.tsx
+++ b/app/w/components/toolbar/toolbar.tsx
@@ -57,6 +57,10 @@ export function Toolbar() {
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
               autoComplete="off"
+              autoCorrect="off"
+              autoCapitalize="off"
+              spellCheck="false"
+              name={`search-input-${Math.random()}`}
             />
           </div>
         </div>