From 7ad05451654eea78e5b290592fa5e91fc7c292a4 Mon Sep 17 00:00:00 2001
From: vahesamsonyan <vahe_samsonyan@epam.com>
Date: Fri, 17 Jul 2026 12:10:36 +0400
Subject: [PATCH] icon is not clickable and also added optional chaining

---
 src/common/hooks/useCapsLock.ts               | 25 ++++++++++++++-----
 .../fieldText/fieldText.module.scss           |  1 +
 src/components/fieldText/fieldText.tsx        |  9 ++++---
 3 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/src/common/hooks/useCapsLock.ts b/src/common/hooks/useCapsLock.ts
index 61843d3a..b08d85f0 100644
--- a/src/common/hooks/useCapsLock.ts
+++ b/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));
       }
     };
 
diff --git a/src/components/fieldText/fieldText.module.scss b/src/components/fieldText/fieldText.module.scss
index 42610414..1bf72223 100644
--- a/src/components/fieldText/fieldText.module.scss
+++ b/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 {
diff --git a/src/components/fieldText/fieldText.tsx b/src/components/fieldText/fieldText.tsx
index ab02f898..f1737669 100644
--- a/src/components/fieldText/fieldText.tsx
+++ b/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>