fix: add ignore attributes for password managers to input fields (#2466)

Author: t128n

app/components/CommandPalette.client.vue

@@ -324,6 +324,7 @@ useEventListener(document, 'keydown', handleGlobalKeydown)
             type="text"
             :placeholder="viewMeta.placeholder"
             no-correct
+            no-password-manager
             size="lg"
             class="w-full"
             :aria-describedby="inputDescribedBy"

app/components/Input/Base.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { noCorrect } from '~/utils/input'
+import { noCorrect, noPasswordManager } from '~/utils/input'
 
 const model = defineModel<string>({ default: '' })
 
@@ -16,6 +16,12 @@ const props = withDefaults(
     noCorrect?: boolean
     /** Keyboard shortcut hint */
     ariaKeyshortcuts?: string
+    /**
+     * Prevents most common password managers from recognizing the input as a password field.
+     * Note: This is not a standard HTML attribute but vendor-specific data-* attributes.
+     * @default false
+     */
+    noPasswordManager?: boolean
   }>(),
   {
     size: 'md',
@@ -36,13 +42,18 @@ defineExpose({
   focus: () => el.value?.focus(),
   blur: () => el.value?.blur(),
 })
+
+const inputAttrs = computed(() => ({
+  ...(props.noCorrect ? noCorrect : {}),
+  ...(props.noPasswordManager ? noPasswordManager : {}),
+}))
 </script>
 
 <template>
   <input
     ref="el"
     v-model="model"
-    v-bind="props.noCorrect ? noCorrect : undefined"
+    v-bind="inputAttrs"
     @focus="emit('focus', $event)"
     @blur="emit('blur', $event)"
     class="appearance-none bg-bg-subtle border border-border font-mono text-fg placeholder:text-fg-subtle transition-[border-color,outline-color] duration-300 hover:border-fg-subtle outline-2 outline-transparent outline-offset-2 focus:border-accent focus-visible:outline-accent/70 disabled:(opacity-50 cursor-not-allowed)"

app/utils/input.ts

@@ -28,3 +28,15 @@ export function isKeyWithoutModifiers(event: KeyboardEvent, key: string): boolea
 }
 
 export const DATE_INPUT_MAX = '9999-12-31'
+
+/** Attributes to prevent password managers from recognizing an input as a password field. */
+export const noPasswordManager = {
+  /* ProtonPass, https://stackoverflow.com/a/51272839 */
+  ['data-protonpass-ignore']: 'true',
+  /* LastPass, https://stackoverflow.com/a/51272839 */
+  ['data-lpignore']: 'true',
+  /* 1Password, https://stackoverflow.com/a/51272839 */
+  ['data-1p-ignore']: 'true',
+  /* Bitwarden, https://stackoverflow.com/questions/41945535/html-disable-password-manager#comment139327111_51272839 */
+  ['data-bwignore']: 'true',
+} as const