diff --git a/core/block_svg.ts b/core/block_svg.ts index ca25560fd01..ea5dd7da7ed 100644 --- a/core/block_svg.ts +++ b/core/block_svg.ts @@ -55,6 +55,7 @@ import type {IPathObject} from './renderers/common/i_path_object.js'; import * as blocks from './serialization/blocks.js'; import type {BlockStyle} from './theme.js'; import * as Tooltip from './tooltip.js'; +import {idGenerator} from './utils.js'; import {Coordinate} from './utils/coordinate.js'; import * as dom from './utils/dom.js'; import {Rect} from './utils/rect.js'; @@ -210,7 +211,9 @@ export class BlockSvg // Expose this block's ID on its top-level SVG group. this.svgGroup.setAttribute('data-id', this.id); - svgPath.id = this.id; + + // The page-wide unique ID of this Block used for focusing. + svgPath.id = idGenerator.getNextUniqueId(); this.doInit_(); } diff --git a/core/interfaces/i_focusable_node.ts b/core/interfaces/i_focusable_node.ts index 6844e080941..b21d7741a5c 100644 --- a/core/interfaces/i_focusable_node.ts +++ b/core/interfaces/i_focusable_node.ts @@ -19,11 +19,13 @@ export interface IFocusableNode { * - blocklyActiveFocus * - blocklyPassiveFocus * - * The returned element must also have a valid ID specified, and unique to the - * element relative to its nearest IFocusableTree parent. It must also have a - * negative tabindex (since the focus manager itself will manage its tab index - * and a tab index must be present in order for the element to be focusable in - * the DOM). + * The returned element must also have a valid ID specified, and unique across + * the entire page. Failing to have a properly unique ID could result in + * trying to focus one node (such as via a mouse click) leading to another + * node with the same ID actually becoming focused by FocusManager. The + * returned element must also have a negative tabindex (since the focus + * manager itself will manage its tab index and a tab index must be present in + * order for the element to be focusable in the DOM). * * The returned element must be visible if the node is ever focused via * FocusManager.focusNode() or FocusManager.focusTree(). It's allowed for an diff --git a/core/workspace_svg.ts b/core/workspace_svg.ts index 5caa56818a2..3e8731afd4b 100644 --- a/core/workspace_svg.ts +++ b/core/workspace_svg.ts @@ -2759,7 +2759,9 @@ export class WorkspaceSvg } // Search for a specific block. - const block = this.getBlockById(id); + const block = this.getAllBlocks(false).find( + (block) => block.getFocusableElement().id === id, + ); if (block) return block; // Search for a workspace comment (semi-expensive).