## The basics
- [x] I [validated my changes](https://developers.google.com/blockly/guides/contribute/core#making_and_verifying_a_change)
## The details
### Resolves
Fixes https://github.com/google/blockly-keyboard-experimentation/issues/563
### Proposed Changes
This introduces support in `FocusManager` to receive feedback on when an ephemerally focused element entirely loses focus (that is, neither it nor any of its descendants have focus).
This also introduces a behavior change for drop-down divs using the previously mentioned functionality to automatically close themselves when they lose focus for any reason (e.g. clicking outside of the div or tab navigating away from it).
Finally, and **importantly**, this adds a case where ephemeral focus does _not_ automatically return to the previously focused node: when focus is lost to the ephemerally focused element's tree and isn't instead put on another focused node.
### Reason for Changes
Ultimately, focus is probably the best proxy for cases when a drop-down div ought to no longer be open. However, tracking focus only within the scope of the drop-down div utility is rather difficult since a lot of the same problems that `FocusManager` handles also occur here (with regards to both descendants and outside elements receiving focus). It made more sense to expand `FocusManager`'s ephemeral focus support:
- It was easier to implement this `FocusManager` and in a way that's much more robust (since it's leveraging existing event handlers).
- Using `FocusManager` trivialized the solution for drop-down divs.
- There could be other use cases where custom ephemeral focus uses might benefit from knowing when they lose focus.
This new support is enabled by default for all drop-down divs, but can be disabled by callers if they wish to revert to the previous behavior of not auto-closing.
The change for whether to restore ephemeral focus was needed to fix a drawback that arises from the automatic returning of ephemeral focus introduced in this PR: when a user clicks out of an open drop-down menu it will restore focus back to the node that held focus prior to taking ephemeral focus (since it properly hides the drop-down div and restores focus). This creates awkward behavior issues for both mouse and keyboard users:
- For mouse: trying to open a drop-down outside of Blockly will automatically close the drop-down when the Blockly drop-down finishes closing (since focus is stolen back away from the thing the user clicked on).
- For keyboard: tab navigating out of Blockly tries to force focus back to Blockly.
**New in v2 of this PR**: Commit 0363d67c18 is the main one that prevents #9203 from being reintroduced by ensuring that widget div only clears its contents after ephemeral focus has returned. This was missed in the first audit since it wasn't clear that this line, in particular, can cause a div with focus to be removed and thus focus lost: dfd565957b/core/widgetdiv.ts (L156)
### Test Coverage
New tests have been added for both the drop-down div and `FocusManager` components, and have been verified as failing without the new behaviors in place.
There may be other edge cases worth testing for `FocusManager` in particular, but the tests introduced in this PR seem to cover the most important cases.
**New in v2 of this PR**: A test was added to validate that widget div now clears its contents only after ephemeral focus has returned to avoid the desyncing scenario that led to #9203. This test has been verified to fail without the fix. There are also a few new tests being added in the keyboard navigation plugin repository that also validate this behavior at a higher level (see https://github.com/google/blockly-keyboard-experimentation/pull/649).
Demonstration of the new behavior:
[Screen recording 2025-07-01 6.28.37 PM.webm](https://github.com/user-attachments/assets/7af29fed-1ba1-4828-a6cd-65bb94509e72)
### Documentation
No new documentation changes seem needed beyond the code documentation updates.
### Additional Information
It's also possible to change the automatic restoration behavior to be conditional instead of always assuming focus shouldn't be reset if focus leaves the ephemeral element, but that's probably a better change if there's an actual user issue discovered with this approach.
This was originally introduced in #9175 but it was reverted in #9204 due to #9203.
* fix: Fix bug that prevented using keyboard shortcuts when the DropDownDiv is open.
* chore: Remove obsolete comment.
* Refactor: Remove unreachable null check.
* chore: Add tests for handling Escape to dismiss the Widget/DropDownDivs.
* chore: Satisfy the linter.
* fix: Fix post-merge test failure.
## The basics
- [x] I [validated my changes](https://developers.google.com/blockly/guides/contribute/core#making_and_verifying_a_change)
## The details
### Resolves
Fixes#9078
Fixes part of #8915 (new tests)
### Proposed Changes
Exposes the ability to disable ephemeral focus management for drop-down divs that are shown using `showPositionedByBlock` or `showPositionedByField`. Previously, this was only supported via `show`, but the former methods are also used externally.
This allows the underlying issue reported by #9078 to be fixed downstream for cases when both the widget and drop-down divs are opened simultaneously.
This PR also introduces tab indexes for both widget and drop-down divs (which were noticed missing when adding tests). This is because, currently, taking ephemeral focus on for a node that doesn't have a tab index will do nothing. This fix is useful for future screen reader work, and doesn't have obvious impacts on existing core or keyboard navigation behaviors (per testing and reasoning).
### Reason for Changes
Exposing the ability to disable ephemeral focus management for all public API entrypoints for showing the divs is crucial for providing the maximum flexibility when downstream apps use both the widget and drop-down divs together. This should ensure that all of these cases can be correctly managed in the same way as https://github.com/google/blockly-samples/pull/2521.
### Test Coverage
This introduces a bunch of new tests that were missing originally for both widget and drop-down div (including specifically verifying ephemeral focus). As part of the drop-down div tests, it also introduces actual positioning logic. This isn't great, but it's somewhat reasonable and robust against page changes (since the actual mocha results can move where the elements will end up on the page).
These changes have also been manually tested with both the core simple playground and the keyboard experiment plugin's test environment with no noticed regressions in either. The plugin's tests have also been run against these changes to ensure no new breakages have been introduced.
### Documentation
No documentation changes beyond the code ones introduced in this PR should be needed.
### Additional Information
The new tests may actually act as a basis for avoiding the test backdoor that's used today for the positioning tests for drop-down div tests. This doesn't replace those existing tests nor does it cover other behaviors and entrypoints that would be worth testing, but testing ephemeral focus is a nice improvement (especially in the context of what this PR is fixing).
* chore(deps): Bump chai from 4.3.10 to 5.1.1
Bumps [chai](https://github.com/chaijs/chai) from 4.3.10 to 5.1.1.
- [Release notes](https://github.com/chaijs/chai/releases)
- [Changelog](https://github.com/chaijs/chai/blob/main/History.md)
- [Commits](https://github.com/chaijs/chai/compare/v4.3.10...v5.1.1)
---
updated-dependencies:
- dependency-name: chai
dependency-type: direct:development
update-type: version-update:semver-major
...
Signed-off-by: dependabot[bot] <support@github.com>
* fix(tests): Migrate all usage of chai to ESM (#8216)
* fix(tests): Migrate node tests from CJS to ESM
This allows us to import (rather than require) chai, fixing failures
caused by that package dropping suppport for CJS in chai v5.0.0.
* fix(tests): Have mocha tests directly import chai
Previously they relied on obtaining it from the global scope, but it's
better if imports are explicit.
* fix(tests): Remove broken load of chai as script
Chai v5.0.0 no longer supports being loaded as a script, so this did
nothing but emit an syntax error message on the console.
* fix(tests): Migrate browser tests from CJS to ESM
This allows us to import (rather than require) chai, fixing failures
caused by chai no longer supporting CJS.
* chore(tests): format
---------
Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Christopher Allen <cpcallen+git@google.com>
* fix(build): Have buildShims clean up up after itself
We need to create a build/package.json file to allow node.js to
load build/src/core/blockly.js and the other chunk entry points
as ES modules (it forcibly assumes .js means CJS even if one is
trying to import, unless package.json says {"type": "module"}),
but this interferes with scripts/migration/js2ts doing a
require('build/deps.js'), which is _not_ an ES module.
Specific error message was:
/Users/cpcallen/src/blockly/scripts/migration/js2ts:56
require(path.resolve(__dirname, '../../build/deps.js'));
^
Error [ERR_REQUIRE_ESM]: require() of ES Module
/Users/cpcallen/src/blockly/build/deps.js from /Users/cpcallen/src/blockly/scripts/migration/js2ts
not supported.
deps.js is treated as an ES module file as it is a .js file whose
nearest parent package.json contains "type": "module" which
declares all .js files in that package scope as ES modules.
Instead rename deps.js to end in .cjs, change the requiring code
to use dynamic import() which is available in all CommonJS
modules, or change "type": "module" to "type": "commonjs" in
/Users/cpcallen/src/blockly/build/package.json to treat all .js
files as CommonJS (using .mjs for all ES modules instead).
at Object.<anonymous> (/Users/cpcallen/src/blockly/scripts/migration/js2ts:56:1) {
code: 'ERR_REQUIRE_ESM'
}
* chore(tests): Reorder to put interesting script nearer top of file
* chore(tests): Add missing imports of closure/goog/goog.js
These modules were depending on being loaded via the
debug module loader, which cannot be used without first loading
base.js as a script, and thereby defining goog.declareModuleId
as a side effect—but if they are to be loaded via direct import
statements then they need to actually import their own
dependencies.
This is a temporary measure as soon the goog.declareMouleId
calls can themselves be deleted.
* refactor(tests): Use import instead of bootstrap to load Blockly
* chores(build): Stop generating deps.mocha.js
This file was only needed by tests/mocha/index.html's use of
the debug module loader (via bootstrap.js), which has now been
removed.
* chore(tests): Remove unneeded goog.declareModuleId calls
These were only needed because these modules were previously
being loaded by goog.require and/or goog.bootstrap.
* chores(tests): Remove dead code
We are fully committed to proper modules now.
* chore: change goog.module to goog.declareModuleId
* chore: change test helper exports to esmod exports
* chore: change test helpers to use esmodule imports
* chore: convert imports of test helpers to esmodule imports
* chore: convert other imports in tests to esm imports
* fix: make imports use built files
* chore: add blockly imports to a bunch of tests
* fix: reference Blockly.Blocks instead of Blocks'
* fix: properly import generators
* chore: fix lint
* chore: cleanup from rebase
* chore: cleanup from rebase
* chore: fix blocks tests
* fix: move core test helpers into new directory
* fix: add test helpers to core and convert to goog modules
* fix: change tests to use local helpers
* fix: change local tests to use chai asserts
* fix: skip field tests in serializer b/c test blocks are unavailable
* fix: rename some helper files
* fix: rename some helper modules
* fix: split block helpers into code gen and serialization
* fix: split block defs into new helper file
* fix: split warning helpers into new file
* fix: split user input helpers into new file
* fix: split event helpers into a new file
* fix: split variable helper into new file
* fix: move remaining test helpers to new setup-teardown file
* fix: rename setup and teardown module
* fix: cleanup from rebase
* fix: undo accidental rename
* fix: lint?
* fix: bad toolbox definitions namespace
* fix: fixup warning helpers
* fix: remove inclusion of dev-tools in mocha tests
* move to modules, but break mocha
* fix: run mocha as a module
* fix: lint
* Use goog.module in mocha tests
* Fix compiler warnings
* Make test helpers a module
* Name test modules Blockly.test.*
This is to be more consistent with how non-test modules are named.
Also remove top-level goog.require of TestHelpers (now
Blockly.test.helpers) since requiring a side-effect-less module does
nothing.
* Convert block_test.js and comment_test.js to goog.module syntax
* Address PR comments
* Goog modulify tests
* Goog modulify toolbox helpers
* Fixes imports and moves common tests from workspace_test.js to a helper file.
* Update test deps after rebase
Co-authored-by: Christopher Allen <cpcallen+git@google.com>
* Migrate core/widgetdiv.js to ES6 const/let
* Migrate core/widgetdiv.js to goog.module
* Migrate core/widgetdiv.js to named requires
* clang-format core/widgetdiv.js
* Mark WidgetDiv.DIV as deprecated and refactor callers to use setters/getters
* Fix deprecation date
* Refactor tests to make setDiv() in core/widgetdiv.js test-only
* Fix type annotations for WidgetDiv.DIV and move test cleanup into sharedTestTeardown
