From f563e3380013190b878235f1ace82d5c636daeab Mon Sep 17 00:00:00 2001 From: Ben Henning Date: Wed, 9 Jul 2025 17:23:39 +0000 Subject: [PATCH 1/2] Revert "fix: Auto-close widget divs on lost focus (#9216)" This reverts commit bea183d85da6465cd0511fc48f2e612b99b6c1ff. --- core/dropdowndiv.ts | 6 +-- core/focus_manager.ts | 2 +- core/widgetdiv.ts | 16 +------- tests/mocha/dropdowndiv_test.js | 4 +- tests/mocha/focus_manager_test.js | 39 +++++++++++------- tests/mocha/index.html | 2 +- tests/mocha/widget_div_test.js | 66 ------------------------------- 7 files changed, 33 insertions(+), 102 deletions(-) diff --git a/core/dropdowndiv.ts b/core/dropdowndiv.ts index f305778222f..608fe9b5b2c 100644 --- a/core/dropdowndiv.ts +++ b/core/dropdowndiv.ts @@ -346,8 +346,8 @@ function showPositionedByRect( secondaryX, secondaryY, manageEphemeralFocus, - opt_onHide, autoCloseOnLostFocus, + opt_onHide, ); } @@ -366,9 +366,9 @@ function showPositionedByRect( * @param primaryY Desired origin point y, in absolute px. * @param secondaryX Secondary/alternative origin point x, in absolute px. * @param secondaryY Secondary/alternative origin point y, in absolute px. + * @param opt_onHide Optional callback for when the drop-down is hidden. * @param manageEphemeralFocus Whether ephemeral focus should be managed * according to the widget div's lifetime. - * @param opt_onHide Optional callback for when the drop-down is hidden. * @param autoCloseOnLostFocus Whether the drop-down should automatically hide * if it loses DOM focus for any reason. * @returns True if the menu rendered at the primary origin point. @@ -382,8 +382,8 @@ export function show( secondaryX: number, secondaryY: number, manageEphemeralFocus: boolean, + autoCloseOnLostFocus: boolean, opt_onHide?: () => void, - autoCloseOnLostFocus?: boolean, ): boolean { owner = newOwner as Field; onHide = opt_onHide || null; diff --git a/core/focus_manager.ts b/core/focus_manager.ts index 1510afca0c5..31453b827b5 100644 --- a/core/focus_manager.ts +++ b/core/focus_manager.ts @@ -138,10 +138,10 @@ export class FocusManager { element instanceof Node && ephemeralFocusElem.contains(element); if (hadFocus !== hasFocus) { - this.ephemerallyFocusedElementCurrentlyHasFocus = hasFocus; if (this.ephemeralDomFocusChangedCallback) { this.ephemeralDomFocusChangedCallback(hasFocus); } + this.ephemerallyFocusedElementCurrentlyHasFocus = hasFocus; } } }; diff --git a/core/widgetdiv.ts b/core/widgetdiv.ts index e0d4e1229df..f9b89de56d2 100644 --- a/core/widgetdiv.ts +++ b/core/widgetdiv.ts @@ -99,8 +99,6 @@ export function createDom() { * passed in here then callers should manage ephemeral focus directly * otherwise focus may not properly restore when the widget closes. Defaults * to true. - * @param autoCloseOnLostFocus Whether the widget should automatically hide if - * it loses DOM focus for any reason. */ export function show( newOwner: unknown, @@ -108,7 +106,6 @@ export function show( newDispose: () => void, workspace?: WorkspaceSvg | null, manageEphemeralFocus: boolean = true, - autoCloseOnLostFocus: boolean = true, ) { hide(); owner = newOwner; @@ -134,18 +131,7 @@ export function show( dom.addClass(div, themeClassName); } if (manageEphemeralFocus) { - const autoCloseCallback = autoCloseOnLostFocus - ? (hasFocus: boolean) => { - // If focus is ever lost, close the widget. - if (!hasFocus) { - hide(); - } - } - : null; - returnEphemeralFocus = getFocusManager().takeEphemeralFocus( - div, - autoCloseCallback, - ); + returnEphemeralFocus = getFocusManager().takeEphemeralFocus(div); } } diff --git a/tests/mocha/dropdowndiv_test.js b/tests/mocha/dropdowndiv_test.js index 9774ed0249d..fac8368a952 100644 --- a/tests/mocha/dropdowndiv_test.js +++ b/tests/mocha/dropdowndiv_test.js @@ -155,7 +155,7 @@ suite('DropDownDiv', function () { }); test('Escape dismisses DropDownDiv', function () { let hidden = false; - Blockly.DropDownDiv.show(this, false, 0, 0, 0, 0, false, () => { + Blockly.DropDownDiv.show(this, false, 0, 0, 0, 0, false, false, () => { hidden = true; }); assert.isFalse(hidden); @@ -276,7 +276,7 @@ suite('DropDownDiv', function () { // Focus an element outside of the drop-down. document.getElementById('nonTreeElementForEphemeralFocus').focus(); - // The drop-down should now be hidden since it lost focus. + // the drop-down should now be hidden since it lost focus. const dropDownDivElem = document.querySelector('.blocklyDropDownDiv'); assert.strictEqual(dropDownDivElem.style.opacity, '0'); }); diff --git a/tests/mocha/focus_manager_test.js b/tests/mocha/focus_manager_test.js index 2544b44db0e..cb4a43652fe 100644 --- a/tests/mocha/focus_manager_test.js +++ b/tests/mocha/focus_manager_test.js @@ -5624,6 +5624,21 @@ suite('FocusManager', function () { /* Ephemeral focus tests. */ suite('takeEphemeralFocus()', function () { + setup(function () { + // Ensure ephemeral-specific elements are focusable. + document.getElementById('nonTreeElementForEphemeralFocus').tabIndex = -1; + document.getElementById('nonTreeGroupForEphemeralFocus').tabIndex = -1; + }); + teardown(function () { + // Ensure ephemeral-specific elements have their tab indexes reset for a clean state. + document + .getElementById('nonTreeElementForEphemeralFocus') + .removeAttribute('tabindex'); + document + .getElementById('nonTreeGroupForEphemeralFocus') + .removeAttribute('tabindex'); + }); + test('with no focused node does not change states', function () { this.focusManager.registerTree(this.testFocusableTree2); this.focusManager.registerTree(this.testFocusableGroup2); @@ -6055,7 +6070,7 @@ suite('FocusManager', function () { assert.isTrue(callback.thirdCall.calledWithExactly(true)); }); - test('with focus change callback set focus to non-ephemeral element with auto return finishes ephemeral does not restore to focused node', function () { + test('with focus change callback set focus to non-ephemeral element with auto return finishes ephemeral', function () { this.focusManager.registerTree(this.testFocusableTree2); this.focusManager.registerTree(this.testFocusableGroup2); this.focusManager.focusNode(this.testFocusableTree2Node1); @@ -6075,24 +6090,21 @@ suite('FocusManager', function () { // Force focus away, triggering the callback's automatic returning logic. ephemeralElement2.focus(); - // The original node should not be focused since the ephemeral element - // lost its own DOM focus while ephemeral focus was active. Instead, the - // newly active element should still hold focus. + // The original focused node should be restored. + const nodeElem = this.testFocusableTree2Node1.getFocusableElement(); const activeElems = Array.from( document.querySelectorAll(ACTIVE_FOCUS_NODE_CSS_SELECTOR), ); - const passiveElems = Array.from( - document.querySelectorAll(PASSIVE_FOCUS_NODE_CSS_SELECTOR), + assert.strictEqual( + this.focusManager.getFocusedNode(), + this.testFocusableTree2Node1, ); - assert.isEmpty(activeElems); - assert.strictEqual(passiveElems.length, 1); + assert.strictEqual(activeElems.length, 1); assert.includesClass( - this.testFocusableTree2Node1.getFocusableElement().classList, - FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, + nodeElem.classList, + FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.isNull(this.focusManager.getFocusedNode()); - assert.strictEqual(document.activeElement, ephemeralElement2); - assert.isFalse(this.focusManager.ephemeralFocusTaken()); + assert.strictEqual(document.activeElement, nodeElem); }); test('with focus on non-ephemeral element ephemeral ended does not restore to focused node', function () { @@ -6127,7 +6139,6 @@ suite('FocusManager', function () { this.testFocusableTree2Node1.getFocusableElement().classList, FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.isNull(this.focusManager.getFocusedNode()); assert.strictEqual(document.activeElement, ephemeralElement2); assert.isFalse(this.focusManager.ephemeralFocusTaken()); }); diff --git a/tests/mocha/index.html b/tests/mocha/index.html index 81618a4f812..fea0fb18e84 100644 --- a/tests/mocha/index.html +++ b/tests/mocha/index.html @@ -142,7 +142,7 @@ - +