Skip to content

fix: account for ephemeral focus in enter precondition #619

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
BenHenning merged 3 commits into from
Jun 24, 2025
Merged

fix: account for ephemeral focus in enter precondition #619

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a3ad16b
chore: upgrade field colour to buggy version
microbit-matt-hillsdon Jun 24, 2025
fc69646
test: inverted test for colour field enter
microbit-matt-hillsdon Jun 24, 2025
819879c
fix: account for ephemeral focus in enter precondition
microbit-matt-hillsdon Jun 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 19 additions & 4 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@
],
"devDependencies": {
"@blockly/dev-scripts": "^4.0.8",
"@blockly/field-colour": "^6.0.0",
"@blockly/field-colour": "^6.0.2",
"@eslint/eslintrc": "^2.1.2",
"@eslint/js": "^8.49.0",
"@types/chai": "^5.2.1",
Expand Down
5 changes: 4 additions & 1 deletion src/actions/enter.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,8 @@ export class EnterAction {
const targetWorkspace = workspace.isFlyout
? workspace.targetWorkspace
: workspace;
return !!targetWorkspace && !targetWorkspace.isReadOnly();
if (!targetWorkspace) return false;
return this.navigation.canCurrentlyEdit(targetWorkspace);
}
default:
return false;
Expand Down Expand Up @@ -111,6 +112,8 @@ export class EnterAction {
* @returns True if the enter action should be handled.
*/
private shouldHandleEnterForWS(workspace: WorkspaceSvg): boolean {
if (!this.navigation.canCurrentlyNavigate(workspace)) return false;

const cursor = workspace.getCursor();
const curNode = cursor?.getCurNode();
if (!curNode) return false;
Expand Down
15 changes: 8 additions & 7 deletions src/navigation.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,12 @@ export class Navigation {
* @returns The state of the given workspace.
*/
getState(): Constants.STATE {
const focusedTree = Blockly.getFocusManager().getFocusedTree();
const focusManager = Blockly.getFocusManager();
if (focusManager.ephemeralFocusTaken()) {
return Constants.STATE.NOWHERE;
}

const focusedTree = focusManager.getFocusedTree();
if (focusedTree instanceof Blockly.WorkspaceSvg) {
if (focusedTree.isFlyout) {
return Constants.STATE.FLYOUT;
Expand Down Expand Up @@ -837,11 +842,7 @@ export class Navigation {
workspace.targetWorkspace ??
workspace
).keyboardAccessibilityMode;
return (
!!accessibilityMode &&
this.getState() !== Constants.STATE.NOWHERE &&
!Blockly.getFocusManager().ephemeralFocusTaken()
);
return !!accessibilityMode && this.getState() !== Constants.STATE.NOWHERE;
}

/**
Expand All @@ -854,7 +855,7 @@ export class Navigation {
* @returns whether keyboard navigation and editing is currently allowed.
*/
canCurrentlyEdit(workspace: Blockly.WorkspaceSvg) {
return this.canCurrentlyNavigate(workspace) && !workspace.options.readOnly;
return this.canCurrentlyNavigate(workspace) && !workspace.isReadOnly();
Copy link
Contributor Author

@microbit-matt-hillsdon microbit-matt-hillsdon Jun 24, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changed for clarity as I had to read the code to learn that options.readOnly was mutated when setIsReadOnly was called.

}

/**
Expand Down
22 changes: 22 additions & 0 deletions test/webdriverio/test/basic_test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -363,4 +363,26 @@ suite('Keyboard navigation on Fields', function () {
// The same field should still be focused
chai.assert.equal(await getFocusedFieldName(this.browser), 'BOOL');
});

test('Do not reopen field editor when handling enter to make a choice inside the editor', async function () {
// Open colour picker
await focusOnBlockField(this.browser, 'colour_picker_1', 'COLOUR');
await this.browser.pause(PAUSE_TIME);
await this.browser.keys(Key.Enter);
await this.browser.pause(PAUSE_TIME);

// Move right to pick a new colour.
await keyRight(this.browser);
// Enter to choose.
await this.browser.keys(Key.Enter);

// Focus seems to take longer than a single pause to settle.
await this.browser.waitUntil(
() =>
this.browser.execute(() =>
document.activeElement?.classList.contains('blocklyActiveFocus'),
Copy link
Collaborator

@BenHenning BenHenning Jun 24, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
document.activeElement?.classList.contains('blocklyActiveFocus'),
document.activeElement?.classList?.contains('blocklyActiveFocus'),

Is this needed to avoid a potential null?

Copy link
Contributor Author

@microbit-matt-hillsdon microbit-matt-hillsdon Jun 24, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think so, e.g. testing in Node:

> document = { activeElement: null }
{ activeElement: null }
> document.activeElement?.classList.contains('foo')
undefined

Copy link
Collaborator

@maribethb maribethb Jun 24, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To add to matt's answer, if the activeElement exists, the classList will exist too (it might be an empty list, but it won't be null) https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

Copy link
Collaborator

@BenHenning BenHenning Jun 24, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah. This behaves differently in Kotlin land (where I'm much more familiar). There the '?' actually cascades. In this case, document.activeElement?.classList would evaluate to either null or the class list which is why the additional ? would be needed (since it would be trying to call contains on null rather than avoiding the call altogether).

This will take me some time to get used to. :)

Copy link
Collaborator

@cpcallen cpcallen Jun 26, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, the way optional chaining works in JS is very pragmatic from the point of view of programmers but decidedly weird from the point of view of JS implementers. I found the parse trees that result from expressions with optional chaining to be extremely unintuitive—despite being (or perhaps because I was) already very familiar with ES5 parsing.

),
{timeout: 1000},
);
});
});