♿️(frontend) fix subdoc opening and emoji pick focus

ensures subdoc opens and emoji picker focus on input

Signed-off-by: Cyril <c.gromoff@gmail.com>

Author: Ovgodd

CHANGELOG.md

@@ -21,7 +21,7 @@ and this project adheres to
 - 🌐(backend) internationalize demo #1644
 - ♿(frontend) improve accessibility:
   - ♿️Improve keyboard accessibility for the document tree #1681
-  - ♿️(frontend) fix subdoc opening and emoji pick focus
+  - ♿️(frontend) fix subdoc opening and emoji pick focus #1745
 
 ### Fixed
 

src/frontend/apps/impress/src/features/docs/doc-editor/components/EmojiPicker.tsx

@@ -20,20 +20,19 @@ export const EmojiPicker = ({
 }: EmojiPickerProps) => {
   const { i18n } = useTranslation();
 
-  // Close picker with Escape key for keyboard users
+  // Handle Escape key to close the picker
   useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
-        event.stopPropagation();
-        event.preventDefault();
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        e.stopPropagation();
         onClickOutside();
       }
     };
 
-    window.addEventListener('keydown', handleKeyDown, true);
-
+    document.addEventListener('keydown', handleEscape, true);
     return () => {
-      window.removeEventListener('keydown', handleKeyDown, true);
+      document.removeEventListener('keydown', handleEscape, true);
     };
   }, [onClickOutside]);