fix: Remove focus before taking a screenshot in AddGranteeBase

risk: nonprod
JIRA: LX-729

Author: jkbmat

Diff for: libs/sdk-ui-tests/backstop/backstop_data/engine_scripts/puppet/clickAndHoverHelper.js

@@ -1,3 +1,5 @@
+// (C) 2025 GoodData Corporation
+
 /* eslint-disable no-console,header/header */
 
 const debug = process.env.BACKSTOP_DEBUG;
@@ -28,12 +30,17 @@ async function withVisibleSelector(page, scenario, selector, fun) {
 }
 
 module.exports = async (page, scenario) => {
+    const shouldResetFocus = scenario.shouldResetFocus;
     const hoverSelectors = scenario.hoverSelectors || scenario.hoverSelector;
     const clickSelectors = scenario.clickSelectors || scenario.clickSelector;
     const keyPressSelectors = scenario.keyPressSelectors || scenario.keyPressSelector;
     const scrollToSelector = scenario.scrollToSelector;
     const postInteractionWait = scenario.postInteractionWait; // selector [str] | ms [int]
 
+    if (shouldResetFocus) {
+        await page.evaluate(() => document.activeElement?.blur());
+    }
+
     if (keyPressSelectors) {
         for (const keyPressSelector of [].concat(keyPressSelectors)) {
             await page.waitForTimeout(keyPressSelector.selector);

Diff for: libs/sdk-ui-tests/backstop/reference/storybook_12_UI_Kit_ShareDialog_AddGranteeBase_-_full-featured_0_document_0_desktop.png

@@ -1,4 +1,4 @@
-// (C) 2007-2019 GoodData Corporation
+// (C) 2007-2025 GoodData Corporation
 
 /*
  * These types were taken mostly as-is from the @types/backstopjs package. renamed interfaces to start with 'I'
@@ -14,6 +14,11 @@ export interface IKeypressSelector {
 /** The Backstop test definition. See https://github.com/garris/BackstopJS#advanced-scenarios */
 export interface IBackstopScenarioConfig {
     [key: string]: any; // Allow for custom properties.
+    /**
+     * Whether the focus should be reset before taking a screenshot
+     */
+    shouldResetFocus?: boolean;
+
     /**
      * Click the specified DOM element prior to screenshot
      */

Diff for: libs/sdk-ui-tests/backstop/reference/storybook_12_UI_Kit_ShareDialog_AddGranteeBase_-_themed_0_document_0_desktop.png

@@ -0,0 +1,14 @@
+// (C) 2025 GoodData Corporation
+import React from "react";
+
+export const useResetFocus = (delay: number = 0): void => {
+    React.useEffect(() => {
+        const timeout = setTimeout(() => {
+            (document.activeElement as HTMLElement | null)?.blur();
+        }, delay);
+
+        return () => {
+            clearTimeout(timeout);
+        };
+    }, [delay]);
+};

Diff for: libs/sdk-ui-tests/stories/_infra/backstopScenario.ts

@@ -1,4 +1,4 @@
-// (C) 2021 GoodData Corporation
+// (C) 2021-2025 GoodData Corporation
 import React from "react";
 import { storiesOf } from "../../../_infra/storyRepository.js";
 import { action } from "@storybook/addon-actions";
@@ -189,5 +189,9 @@ export const AddGranteeExamples = (): JSX.Element => {
 };
 
 storiesOf(`${UiKit}/ShareDialog/AddGranteeBase`)
-    .add("full-featured", () => <AddGranteeExamples />, { screenshot: true })
-    .add("themed", () => wrapWithTheme(<AddGranteeExamples />), { screenshot: true });
+    .add("full-featured", () => <AddGranteeExamples />, {
+        screenshot: { shouldResetFocus: true },
+    })
+    .add("themed", () => wrapWithTheme(<AddGranteeExamples />), {
+        screenshot: { shouldResetFocus: true },
+    });