EPMRPP-117802 || Caps Lock icon is clickable and hidden when clicking on it

src/common/hooks/useCapsLock.ts

@@ -16,28 +16,41 @@
 
 import { useCallback, useEffect, useState } from 'react';
 
+type CapsLockEvent = {
+  getModifierState?: (key: string) => boolean;
+  nativeEvent?: { getModifierState?: (key: string) => boolean };
+  key?: string;
+};
+
+const getCapsLockState = (event?: CapsLockEvent | null): boolean =>
+  event?.getModifierState?.('CapsLock') ??
+  event?.nativeEvent?.getModifierState?.('CapsLock') ??
+  false;
+
 /**
  * Tracks Caps Lock state via window-level keyboard events.
  * Also exposes syncFromMouseEvent so callers can re-read the real OS state
- * from a MouseEvent (e.g. onMouseDown on the input) — MouseEvent.getModifierState
- * is reliable even after tab switches, unlike FocusEvent which lacks it.
+ * from a MouseEvent (e.g. onMouseDown on the input).
+ *
+ * Optional-chained: autofill, password managers, and some browser/extension
+ * events fire keydown/mousedown without getModifierState — calling it raw throws.
  */
 export const useCapsLock = () => {
   const [capsLockOn, setCapsLockOn] = useState(false);
 
-  const syncFromMouseEvent = useCallback((event: MouseEvent) => {
-    setCapsLockOn(event.getModifierState('CapsLock'));
+  const syncFromMouseEvent = useCallback((event: CapsLockEvent) => {
+    setCapsLockOn(getCapsLockState(event));
   }, []);
 
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
-      setCapsLockOn(event.getModifierState('CapsLock'));
+      setCapsLockOn(getCapsLockState(event));
     };
 
     // keydown fires before the OS flips the CapsLock modifier; keyup reads the new state.
     const handleKeyUp = (event: KeyboardEvent) => {
       if (event.key === 'CapsLock') {
-        setCapsLockOn(event.getModifierState('CapsLock'));
+        setCapsLockOn(getCapsLockState(event));
       }
     };
 

src/components/fieldText/fieldText.module.scss

@@ -119,6 +119,7 @@
       align-items: center;
       justify-content: center;
       margin-right: 12px;
+      cursor: default;
     }
 
     .caps-lock-tooltip-content {

src/components/fieldText/fieldText.tsx

@@ -176,21 +176,24 @@ export const FieldText = forwardRef<HTMLInputElement, FieldTextProps>(
               disabled={disabled}
               id={inputId}
               onChange={onChange}
+              {...rest}
               onFocus={onFocusHandler}
               onBlur={onBlurHandler}
               onMouseDown={(e) => {
-                if (capsLockMessage) syncFromMouseEvent(e.nativeEvent);
+                if (capsLockMessage) {
+                  syncFromMouseEvent(e.nativeEvent ?? e);
+                }
                 onMouseDown?.(e);
               }}
-              {...rest}
             />
             {showCapsLock && (
               <Tooltip
                 content={capsLockMessage}
                 wrapperClassName={cx('caps-lock-tooltip-wrapper')}
                 contentClassName={cx('caps-lock-tooltip-content')}
+                wrapperTabIndex={-1}
               >
-                <span className={cx('caps-lock-icon')}>
+                <span className={cx('caps-lock-icon')} onMouseDown={(e) => e.preventDefault()}>
                   <CapsLockIcon />
                 </span>
               </Tooltip>