From 299a80dd5a2d3c2ebd51d1e7954b44de5aaa4f67 Mon Sep 17 00:00:00 2001
From: Syngnat <yangguofeng919@gmail.com>
Date: Tue, 28 Apr 2026 10:21:19 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix(frontend):=20=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D=20macOS=20Caps=20Lock=20=E8=BE=93=E5=85=A5=E6=B5=AE?=
 =?UTF-8?q?=E5=B1=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/App.tsx                    |  7 ++++---
 frontend/src/utils/inputAutoCap.test.ts | 13 ++++++-------
 frontend/src/utils/inputAutoCap.ts      |  5 +++--
 3 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 4992151..5ff7126 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -18,7 +18,7 @@ import SecurityUpdateProgressModal from './components/SecurityUpdateProgressModa
 import SecurityUpdateSettingsModal from './components/SecurityUpdateSettingsModal';
 import { DEFAULT_APPEARANCE, useStore } from './store';
 import { SavedConnection, SecurityUpdateIssue, SecurityUpdateStatus } from './types';
-import { blurToFilter, isMacLikePlatform, normalizeBlurForPlatform, normalizeOpacityForPlatform, isWindowsPlatform, resolveAppearanceValues } from './utils/appearance';
+import { blurToFilter, isMacLikePlatform, normalizeBlurForPlatform, normalizeOpacityForPlatform, isWindowsPlatform, resolveAppearanceValues, resolveTextInputSafeBackdropFilter } from './utils/appearance';
 import { DATA_GRID_COLUMN_WIDTH_MODE_OPTIONS, sanitizeDataTableColumnWidthMode } from './utils/dataGridDisplay';
 import { getMacNativeTitlebarPaddingLeft, getMacNativeTitlebarPaddingRight, shouldHandleMacNativeFullscreenShortcut, shouldSuppressMacNativeEscapeExit } from './utils/macWindow';
 import { shouldEnableMacWindowDiagnostics } from './utils/macWindowDiagnostics';
@@ -836,6 +836,7 @@ function App() {
       fontSize: isSidebarCompact ? 13 : 14,
   }), [blurFilter, darkMode, effectiveUiScale, isOpaqueUtilityMode, isSidebarCompact, utilityButtonBgColor, utilityButtonBorderColor, utilityButtonShadow]);
   const disableLocalBackdropFilter = isMacLikePlatform();
+  const textInputSafeBackdropFilter = resolveTextInputSafeBackdropFilter(blurFilter, disableLocalBackdropFilter);
   const overlayTheme = useMemo(
       () => buildOverlayWorkbenchTheme(darkMode, { disableBackdropFilter: disableLocalBackdropFilter }),
       [darkMode, disableLocalBackdropFilter],
@@ -2565,8 +2566,8 @@ function App() {
             background: 'transparent',
             borderRadius: showLinuxResizeHandles ? 0 : 'var(--gonavi-border-radius)',
             clipPath: showLinuxResizeHandles ? 'none' : 'inset(0 round var(--gonavi-border-radius))',
-            backdropFilter: blurFilter,
-            WebkitBackdropFilter: blurFilter,
+            backdropFilter: textInputSafeBackdropFilter,
+            WebkitBackdropFilter: textInputSafeBackdropFilter,
         }}>
           {/* Custom Title Bar */}
           <div
diff --git a/frontend/src/utils/inputAutoCap.test.ts b/frontend/src/utils/inputAutoCap.test.ts
index 98a57dc..1a50234 100644
--- a/frontend/src/utils/inputAutoCap.test.ts
+++ b/frontend/src/utils/inputAutoCap.test.ts
@@ -3,15 +3,14 @@ import { describe, expect, it } from 'vitest';
 import { applyNoAutoCapAttributes, applyNoAutoCapAttributesWithin, noAutoCapInputProps } from './inputAutoCap';
 
 describe('inputAutoCap', () => {
-  it('exports input props that disable auto capitalization and correction', () => {
+  it('exports input props that disable correction without forcing native capitalization state', () => {
     expect(noAutoCapInputProps).toEqual({
-      autoCapitalize: 'none',
       autoCorrect: 'off',
       spellCheck: false,
     });
   });
 
-  it('applies lowercase DOM attributes to inputs and textareas', () => {
+  it('applies correction attributes to inputs and textareas without autocapitalize', () => {
     const inputAttributes: Record<string, string> = {};
     const textareaAttributes: Record<string, string> = {};
     const input = {
@@ -30,10 +29,10 @@ describe('inputAutoCap', () => {
     applyNoAutoCapAttributes(input);
     applyNoAutoCapAttributes(textarea);
 
-    expect(inputAttributes.autocapitalize).toBe('none');
+    expect(inputAttributes.autocapitalize).toBeUndefined();
     expect(inputAttributes.autocorrect).toBe('off');
     expect(inputAttributes.spellcheck).toBe('false');
-    expect(textareaAttributes.autocapitalize).toBe('none');
+    expect(textareaAttributes.autocapitalize).toBeUndefined();
     expect(textareaAttributes.autocorrect).toBe('off');
     expect(textareaAttributes.spellcheck).toBe('false');
   });
@@ -62,9 +61,9 @@ describe('inputAutoCap', () => {
 
     applyNoAutoCapAttributesWithin(root);
 
-    expect(inputAttributes.autocapitalize).toBe('none');
+    expect(inputAttributes.autocapitalize).toBeUndefined();
     expect(inputAttributes.autocorrect).toBe('off');
-    expect(textareaAttributes.autocapitalize).toBe('none');
+    expect(textareaAttributes.autocapitalize).toBeUndefined();
     expect(textareaAttributes.autocorrect).toBe('off');
   });
 });
diff --git a/frontend/src/utils/inputAutoCap.ts b/frontend/src/utils/inputAutoCap.ts
index 589f0ea..450cafa 100644
--- a/frontend/src/utils/inputAutoCap.ts
+++ b/frontend/src/utils/inputAutoCap.ts
@@ -1,5 +1,4 @@
 export const noAutoCapInputProps = {
-  autoCapitalize: 'none' as const,
   autoCorrect: 'off' as const,
   spellCheck: false,
 };
@@ -10,7 +9,9 @@ export const applyNoAutoCapAttributes = (element: Element) => {
     return;
   }
 
-  element.setAttribute('autocapitalize', 'none');
+  if (typeof element.removeAttribute === 'function') {
+    element.removeAttribute('autocapitalize');
+  }
   element.setAttribute('autocorrect', 'off');
   element.setAttribute('spellcheck', 'false');
 };