diff --git a/frontend/src/components/ConnectionModal.tsx b/frontend/src/components/ConnectionModal.tsx index 0f0dec8..9fd7df8 100644 --- a/frontend/src/components/ConnectionModal.tsx +++ b/frontend/src/components/ConnectionModal.tsx @@ -19,6 +19,20 @@ const CONNECTION_MODAL_WIDTH = 960; const CONNECTION_MODAL_BODY_HEIGHT = 620; const STEP1_SIDEBAR_DIVIDER_DARK = 'rgba(255, 255, 255, 0.16)'; const STEP1_SIDEBAR_DIVIDER_LIGHT = 'rgba(0, 0, 0, 0.08)'; +const noAutoCapInputProps = { + autoCapitalize: 'none' as const, + autoCorrect: 'off' as const, + spellCheck: false, +}; + +const applyNoAutoCapAttributes = (element: Element) => { + if (!(element instanceof HTMLInputElement) && !(element instanceof HTMLTextAreaElement)) { + return; + } + element.setAttribute('autocapitalize', 'none'); + element.setAttribute('autocorrect', 'off'); + element.setAttribute('spellcheck', 'false'); +}; type ConnectionSecretKey = | 'primaryPassword' @@ -197,6 +211,23 @@ const ConnectionModal: React.FC<{ border: darkMode ? '1px solid rgba(255, 255, 255, 0.16)' : '1px solid rgba(0, 0, 0, 0.06)', }; + useEffect(() => { + if (!open) return; + const applyForConnectionModal = () => { + document + .querySelectorAll('.connection-modal-wrap input, .connection-modal-wrap textarea') + .forEach(applyNoAutoCapAttributes); + }; + applyForConnectionModal(); + const observer = new MutationObserver(() => { + applyForConnectionModal(); + }); + observer.observe(document.body, { childList: true, subtree: true }); + return () => { + observer.disconnect(); + }; + }, [open]); + const modalShellStyle = useMemo(() => ({ background: overlayTheme.shellBg, @@ -2072,7 +2103,7 @@ const ConnectionModal: React.FC<{