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 */}
{ - 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 = {}; const textareaAttributes: Record = {}; 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'); };