From 50731a4573695d7261f5197acae0fc5f09f05260 Mon Sep 17 00:00:00 2001
From: Dmitrii Shilov <dshilov@microsoft.com>
Date: Tue, 3 Dec 2024 14:25:59 +0100
Subject: [PATCH 1/2] fix: Fixes tabster behavior around Monaco Editor

---
 src/webviews/MonacoEditor.tsx | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/src/webviews/MonacoEditor.tsx b/src/webviews/MonacoEditor.tsx
index bffede710..fcf8037d9 100644
--- a/src/webviews/MonacoEditor.tsx
+++ b/src/webviews/MonacoEditor.tsx
@@ -7,7 +7,7 @@ import Editor, { loader, useMonaco, type EditorProps } from '@monaco-editor/reac
 // eslint-disable-next-line import/no-internal-modules
 import * as monacoEditor from 'monaco-editor/esm/vs/editor/editor.api';
 
-import { useUncontrolledFocus } from '@fluentui/react-components';
+import { useArrowNavigationGroup, useUncontrolledFocus } from '@fluentui/react-components';
 import { useEffect } from 'react';
 import { useThemeState } from './theme/state/ThemeContext';
 
@@ -16,7 +16,9 @@ loader.config({ monaco: monacoEditor });
 export const MonacoEditor = (props: EditorProps) => {
     const monaco = useMonaco();
     const themeState = useThemeState();
-    const attr = useUncontrolledFocus();
+    const uncontrolledFocus = useUncontrolledFocus();
+    const navigationGroup = useArrowNavigationGroup({ circular: true, axis: 'both' });
+    const tabsterHook = { ...navigationGroup, ...uncontrolledFocus }; // The order of these attributes is important
 
     useEffect(() => {
         if (monaco) {
@@ -28,13 +30,8 @@ export const MonacoEditor = (props: EditorProps) => {
     }, [monaco, themeState]);
 
     return (
-        <section {...attr} style={{ width: '100%', height: '100%' }}>
+        <section {...tabsterHook} style={{ width: '100%', height: '100%' }}>
             <Editor {...props} theme={themeState.monaco.themeName} />
-            <input
-                style={{ position: 'absolute', width: '1px', height: '1px', top: '0px', zIndex: -999 }}
-                id="monaco-editor-aria-container"
-                aria-label="Element to prevent loosing focus from editor"
-            />
         </section>
     );
 };

From b8f2869b9679d575331b14ae27c4d78743cb138f Mon Sep 17 00:00:00 2001
From: Dmitrii Shilov <dshilov@microsoft.com>
Date: Thu, 5 Dec 2024 16:29:30 +0100
Subject: [PATCH 2/2] fix: Fixes tabster behavior around Monaco Editor

---
 src/webviews/MonacoEditor.tsx | 23 ++++++++++++++++++-----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/webviews/MonacoEditor.tsx b/src/webviews/MonacoEditor.tsx
index fcf8037d9..f88c6486f 100644
--- a/src/webviews/MonacoEditor.tsx
+++ b/src/webviews/MonacoEditor.tsx
@@ -7,7 +7,7 @@ import Editor, { loader, useMonaco, type EditorProps } from '@monaco-editor/reac
 // eslint-disable-next-line import/no-internal-modules
 import * as monacoEditor from 'monaco-editor/esm/vs/editor/editor.api';
 
-import { useArrowNavigationGroup, useUncontrolledFocus } from '@fluentui/react-components';
+import { useUncontrolledFocus } from '@fluentui/react-components';
 import { useEffect } from 'react';
 import { useThemeState } from './theme/state/ThemeContext';
 
@@ -17,8 +17,6 @@ export const MonacoEditor = (props: EditorProps) => {
     const monaco = useMonaco();
     const themeState = useThemeState();
     const uncontrolledFocus = useUncontrolledFocus();
-    const navigationGroup = useArrowNavigationGroup({ circular: true, axis: 'both' });
-    const tabsterHook = { ...navigationGroup, ...uncontrolledFocus }; // The order of these attributes is important
 
     useEffect(() => {
         if (monaco) {
@@ -30,8 +28,23 @@ export const MonacoEditor = (props: EditorProps) => {
     }, [monaco, themeState]);
 
     return (
-        <section {...tabsterHook} style={{ width: '100%', height: '100%' }}>
-            <Editor {...props} theme={themeState.monaco.themeName} />
+        <section {...uncontrolledFocus} style={{ width: '100%', height: '100%' }}>
+            <i
+                // The hack to make the focus trap work
+                // https://github.com/microsoft/fluentui/blob/0f490a4fea60df6b2ad0f5a6e088017df7ce1d54/packages/react-components/react-tabster/src/hooks/useTabster.ts#L34
+                data-is-focus-trap-zone-bumper={true}
+                style={{
+                    position: 'fixed',
+                    height: '1px',
+                    width: '1px',
+                    opacity: '0.001',
+                    zIndex: '-1',
+                    contentVisibility: 'hidden',
+                    top: '0px',
+                    left: '0px',
+                }}
+            ></i>
+            <Editor {...props} data-is-focus-trap-zone-bumper={'true'} theme={themeState.monaco.themeName} />
         </section>
     );
 };