diff --git a/core/dropdowndiv.ts b/core/dropdowndiv.ts index 608fe9b5b2c..f305778222f 100644 --- a/core/dropdowndiv.ts +++ b/core/dropdowndiv.ts @@ -346,8 +346,8 @@ function showPositionedByRect( secondaryX, secondaryY, manageEphemeralFocus, - autoCloseOnLostFocus, opt_onHide, + autoCloseOnLostFocus, ); } @@ -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 31453b827b5..1510afca0c5 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 f9b89de56d2..e0d4e1229df 100644 --- a/core/widgetdiv.ts +++ b/core/widgetdiv.ts @@ -99,6 +99,8 @@ 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, @@ -106,6 +108,7 @@ export function show( newDispose: () => void, workspace?: WorkspaceSvg | null, manageEphemeralFocus: boolean = true, + autoCloseOnLostFocus: boolean = true, ) { hide(); owner = newOwner; @@ -131,7 +134,18 @@ export function show( dom.addClass(div, themeClassName); } if (manageEphemeralFocus) { - returnEphemeralFocus = getFocusManager().takeEphemeralFocus(div); + const autoCloseCallback = autoCloseOnLostFocus + ? (hasFocus: boolean) => { + // If focus is ever lost, close the widget. + if (!hasFocus) { + hide(); + } + } + : null; + returnEphemeralFocus = getFocusManager().takeEphemeralFocus( + div, + autoCloseCallback, + ); } } diff --git a/tests/mocha/dropdowndiv_test.js b/tests/mocha/dropdowndiv_test.js index fac8368a952..9774ed0249d 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, false, () => { + Blockly.DropDownDiv.show(this, false, 0, 0, 0, 0, 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 cb4a43652fe..2544b44db0e 100644 --- a/tests/mocha/focus_manager_test.js +++ b/tests/mocha/focus_manager_test.js @@ -5624,21 +5624,6 @@ 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); @@ -6070,7 +6055,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', function () { + test('with focus change callback set focus to non-ephemeral element with auto return finishes ephemeral does not restore to focused node', function () { this.focusManager.registerTree(this.testFocusableTree2); this.focusManager.registerTree(this.testFocusableGroup2); this.focusManager.focusNode(this.testFocusableTree2Node1); @@ -6090,21 +6075,24 @@ suite('FocusManager', function () { // Force focus away, triggering the callback's automatic returning logic. ephemeralElement2.focus(); - // The original focused node should be restored. - const nodeElem = this.testFocusableTree2Node1.getFocusableElement(); + // 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. const activeElems = Array.from( document.querySelectorAll(ACTIVE_FOCUS_NODE_CSS_SELECTOR), ); - assert.strictEqual( - this.focusManager.getFocusedNode(), - this.testFocusableTree2Node1, + const passiveElems = Array.from( + document.querySelectorAll(PASSIVE_FOCUS_NODE_CSS_SELECTOR), ); - assert.strictEqual(activeElems.length, 1); + assert.isEmpty(activeElems); + assert.strictEqual(passiveElems.length, 1); assert.includesClass( - nodeElem.classList, - FocusManager.ACTIVE_FOCUS_NODE_CSS_CLASS_NAME, + this.testFocusableTree2Node1.getFocusableElement().classList, + FocusManager.PASSIVE_FOCUS_NODE_CSS_CLASS_NAME, ); - assert.strictEqual(document.activeElement, nodeElem); + assert.isNull(this.focusManager.getFocusedNode()); + assert.strictEqual(document.activeElement, ephemeralElement2); + assert.isFalse(this.focusManager.ephemeralFocusTaken()); }); test('with focus on non-ephemeral element ephemeral ended does not restore to focused node', function () { @@ -6139,6 +6127,7 @@ 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 fea0fb18e84..81618a4f812 100644 --- a/tests/mocha/index.html +++ b/tests/mocha/index.html @@ -142,7 +142,7 @@ - +