focus fix

Author: KSemenenko

src/PrompterOne.Shared/Editor/Components/EditorSourcePanel.Search.cs

@@ -47,7 +47,7 @@ private async Task OnFindQueryInputAsync(ChangeEventArgs args)
     {
         _findQuery = args.Value?.ToString() ?? string.Empty;
         RefreshFindMatchesForCurrentText();
-        await FocusActiveFindMatchAsync();
+        await FocusActiveFindMatchAsync(focusEditor: false);
         await InvokeAsync(StateHasChanged);
     }
 
@@ -98,19 +98,19 @@ private async Task NavigateFindMatchAsync(int direction)
 
         var nextIndex = (_findMatchIndex + direction + _findMatches.Count) % _findMatches.Count;
         _findMatchIndex = nextIndex;
-        await FocusActiveFindMatchAsync();
+        await FocusActiveFindMatchAsync(focusEditor: false);
         await InvokeAsync(StateHasChanged);
     }
 
-    private async Task FocusActiveFindMatchAsync()
+    private async Task FocusActiveFindMatchAsync(bool focusEditor)
     {
         if (_findMatchIndex < 0 || _findMatchIndex >= _findMatches.Count)
         {
             return;
         }
 
         var activeMatch = _findMatches[_findMatchIndex];
-        await FocusRangeAsync(activeMatch.Start, activeMatch.End);
+        await FocusRangeAsync(activeMatch.Start, activeMatch.End, focusEditor: focusEditor);
     }
 
     private void ClearFindState()

src/PrompterOne.Shared/Editor/Components/EditorSourcePanel.razor.cs

@@ -153,10 +153,10 @@ protected override bool ShouldRender()
         return true;
     }
 
-    public async Task FocusRangeAsync(int start, int end, bool revealSelection = true)
+    public async Task FocusRangeAsync(int start, int end, bool revealSelection = true, bool focusEditor = true)
     {
         var selection = await RunSelectionInteropAsync(
-            () => MonacoInterop.SetSelectionAsync(_editorHostRef, start, end, revealSelection),
+            () => MonacoInterop.SetSelectionAsync(_editorHostRef, start, end, revealSelection, focusEditor),
             FocusSelectionFailureMessage);
 
         if (selection is null)

src/PrompterOne.Shared/Editor/Services/EditorMonacoInterop.cs

@@ -70,7 +70,8 @@ public async Task<EditorSelectionViewModel> SetSelectionAsync(
         ElementReference host,
         int start,
         int end,
-        bool revealSelection = true)
+        bool revealSelection = true,
+        bool focusEditor = true)
     {
         var module = await GetModuleAsync();
         if (module is null)
@@ -83,7 +84,8 @@ public async Task<EditorSelectionViewModel> SetSelectionAsync(
             host,
             start,
             end,
-            revealSelection);
+            revealSelection,
+            focusEditor);
 
         return MapSelection(result);
     }

src/PrompterOne.Shared/wwwroot/editor/editor-monaco.js

@@ -337,13 +337,13 @@ export function getSelectionState(host) {
     return state ? createSelectionState(state) : createEmptySelectionState();
 }
 
-export function setSelection(host, start, end, revealSelection = true) {
+export function setSelection(host, start, end, revealSelection = true, focusEditor = true) {
     const state = hostStates.get(host);
     if (!state) {
         return createEmptySelectionState();
     }
 
-    applySelection(state, start ?? 0, end ?? 0, revealSelection !== false);
+    applySelection(state, start ?? 0, end ?? 0, revealSelection !== false, undefined, undefined, focusEditor !== false);
     notifySelectionChanged(state, false);
     return createSelectionState(state);
 }
@@ -1473,7 +1473,7 @@ function centerSelectionLineInViewport(state) {
     state.editor.focus();
 }
 
-function applySelection(state, start, end, revealSelection, selectionDirection, preservedScrollPositionOverride) {
+function applySelection(state, start, end, revealSelection, selectionDirection, preservedScrollPositionOverride, focusEditor = true) {
     const model = state.editor.getModel();
     if (!model) {
         return;
@@ -1499,7 +1499,9 @@ function applySelection(state, start, end, revealSelection, selectionDirection,
 
     if (revealSelection) {
         const scrollType = state.monaco.editor.ScrollType.Immediate;
-        state.editor.focus();
+        if (focusEditor) {
+            state.editor.focus();
+        }
         revealSelectionInViewport(state, scrollType);
         state.editor.render();
         requestAnimationFrame(() => {
@@ -1513,7 +1515,9 @@ function applySelection(state, start, end, revealSelection, selectionDirection,
         });
     }
     else {
-        state.editor.focus();
+        if (focusEditor) {
+            state.editor.focus();
+        }
         restoreEditorScrollPosition(state, preservedScrollPosition);
     }
 

tests/PrompterOne.Web.UITests/Editor/EditorFindFlowTests.cs

@@ -77,6 +77,35 @@ await UiScenarioArtifacts.CapturePageAsync(
                 BrowserTestConstants.EditorFlow.FindSurfaceStep);
         });
 
+    [Test]
+    public Task EditorScreen_FindBar_KeepsFocusInSearchInputWhileTyping() =>
+        RunPageAsync(async page =>
+        {
+            UiScenarioArtifacts.ResetScenario(BrowserTestConstants.EditorFlow.FindFocusScenario);
+
+            await page.GotoAsync(BrowserTestConstants.Routes.EditorDemo);
+            await EditorMonacoDriver.WaitUntilReadyAsync(page);
+
+            var input = page.GetByTestId(UiTestIds.Editor.FindInput);
+
+            await page.GetByTestId(UiTestIds.Editor.FindToggle).ClickAsync();
+            await Expect(input).ToBeVisibleAsync();
+
+            await input.ClickAsync();
+            await input.TypeAsync("i");
+            await Expect(input).ToHaveValueAsync("i");
+            await ExpectActiveElementDataTestAsync(page, UiTestIds.Editor.FindInput);
+
+            await input.TypeAsync("n");
+            await Expect(input).ToHaveValueAsync("in");
+            await ExpectActiveElementDataTestAsync(page, UiTestIds.Editor.FindInput);
+
+            await UiScenarioArtifacts.CapturePageAsync(
+                page,
+                BrowserTestConstants.EditorFlow.FindFocusScenario,
+                BrowserTestConstants.EditorFlow.FindFocusStep);
+        });
+
     private static async Task<CssColor> ReadCssColorAsync(Microsoft.Playwright.ILocator locator, string propertyName) =>
         await locator.EvaluateAsync<CssColor>(
             """
@@ -109,4 +138,15 @@ private static Task<double> ReadPxValueAsync(Microsoft.Playwright.ILocator locat
             (element, propertyName) => Number.parseFloat(getComputedStyle(element)[propertyName] || "0")
             """,
             propertyName);
+
+    private static async Task ExpectActiveElementDataTestAsync(Microsoft.Playwright.IPage page, string expectedTestId)
+    {
+        var activeElementTestId = await page.EvaluateAsync<string>(
+            """
+            attributeName => document.activeElement?.getAttribute(attributeName) ?? ""
+            """,
+            BrowserTestConstants.Html.DataTestAttribute);
+
+        await Assert.That(activeElementTestId).IsEqualTo(expectedTestId);
+    }
 }

tests/PrompterOne.Web.UITests/Support/BrowserTestConstants.ScreenFlows.cs

@@ -50,6 +50,8 @@ public static class EditorFlow
         public const string ToolbarDropdownAlignmentFloatingStep = "02-floating-voice-menu-left-cluster";
         public const string FindSurfaceScenario = "editor-find-surface";
         public const string FindSurfaceStep = "01-styled-find-bar";
+        public const string FindFocusScenario = "editor-find-focus";
+        public const string FindFocusStep = "02-search-input-keeps-focus";
         public const double MinimumDateFieldWidthPx = 150;
         public const double MinimumFindShellBackgroundAlpha = 0.01;
         public const double MaximumFindButtonBackgroundAlpha = 0.2;