fix: Ensure selection stays when dragging blocks, comments, and bubbles - #9034

Merged
BenHenning merged 9 commits into
RaspberryPiFoundation:rc/v12.0.0from
BenHenning:fix-selection-lost-on-drag
May 13, 2025
Merged

fix: Ensure selection stays when dragging blocks, comments, and bubbles#9034
BenHenning merged 9 commits into
RaspberryPiFoundation:rc/v12.0.0from
BenHenning:fix-selection-lost-on-drag

Conversation

@BenHenning

@BenHenningBenHenning commented May 12, 2025

Copy link
Copy Markdown
Collaborator

The basics

The details

Resolves

Fixes#9027
FixesRaspberryPiFoundation/blockly-keyboard-experimentation#521

Proposed Changes

Ensure that a block & workspace comment being dragged are properly focused mid-drag.

Reason for Changes

Focus seems to be lost due to the element being moved to the drag layer, so re-focusing the element ensures that it remains both actively focused and selected while dragging. This applies to both blocks and workspace comments, and theoretically bubbles (though that's only for an event basis since they don't actually have a selection highlight).

The regressions were likely caused when block and comment selection was moved to be fully synced based on active focus.

Note that there are also changes for the selection block path. It was noticed when trying to fixRaspberryPiFoundation/blockly-keyboard-experimentation#521 that since a selection highlight is a complete copy of a block's path it was also copying the ID and CSS state for that block. It just so happened that the block was actually receiving passive focus at the time of re-render that generated the selection highlight and thus that state took precedence in the new path object. This was likely due to rendering happening while moving the block over to the drag layer (and thus during its brief window of having lost focus). The fix is to simply ensure that all focus-related attributes are properly removed from the cloned object.

There is one other location where a block's path is cloned: block_animations.ts for disposing of the block. I suspect this won't actually require the additional attribute removal being done for the selection highlight, so this case hasn't been fixed. My local testing of block deletion seems to suggest it looks correct, but there could well be edge cases that I haven't considered.

Test Coverage

This has been manually verified in Core's simple playground and in the keyboard navigation plugin's test environment.

It would be helpful to add a new test case for the underlying problem (i.e. ensuring that the block holds focus mid-drag) as part of resolving #8915.

Documentation

No new documentation should need to be added.

Additional Information

This was found during the development of RaspberryPiFoundation/blockly-keyboard-experimentation#511.

@github-actionsgithub-actionsBot added PR: fix Fixes a bug and removed PR: fix Fixes a bug labels May 12, 2025
@google-cla

Copy link
Copy Markdown

Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

View this failed invocation of the CLA check for more information.

For the most up to date status, view the checks section at the bottom of the pull request.

@github-actionsgithub-actionsBot removed the PR: fix Fixes a bug label May 12, 2025
@BenHenning
BenHenning changed the base branch from develop to rc/v12.0.0May 12, 2025 23:30
@github-actionsgithub-actionsBot added PR: fix Fixes a bug and removed PR: fix Fixes a bug labels May 12, 2025

@BenHenningBenHenning left a comment

Copy link
Copy Markdown
CollaboratorAuthor

Choose a reason for hiding this comment

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

Self-reviewed changes (added some additional comment lines for clarity).

@BenHenning
BenHenning marked this pull request as ready for review May 12, 2025 23:34
@BenHenning
BenHenning requested a review from a team as a code ownerMay 12, 2025 23:34
@BenHenning
BenHenning enabled auto-merge (squash) May 12, 2025 23:35
@rachel-fenichel

Copy link
Copy Markdown
Collaborator

Is there a bug for "At the time of the PR being opened, this couldn't be tested in the test environment for the experimental keyboard navigation plugin since there's a navigation connection issue there that needs to be resolved to test movement"?

Comment threadcore/dragging/block_drag_strategy.ts Outdated

// Since moving the block to the drag layer will cause it to lose focus,
// ensure it regains focus (to enable the block's selection highlight).
getFocusManager().focusNode(this.block);

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Question: should this be done in moveToDragLayer (and moveOffDragLayer) instead of in the drag strategy?

Copy link
Copy Markdown
CollaboratorAuthor

Choose a reason for hiding this comment

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

Good idea. This actually made me realize that workspace comments had the same problem, so this shift actually fixes those, too.

@BenHenningBenHenning changed the title fix: Ensure selection stays when dragging blocksfix: Ensure selection stays when dragging blocks, comments, and bubblesMay 13, 2025
@github-actionsgithub-actionsBot added PR: fix Fixes a bug and removed PR: fix Fixes a bug labels May 13, 2025
@github-actionsgithub-actionsBot removed the PR: fix Fixes a bug label May 13, 2025
@github-actionsgithub-actionsBot added the PR: fix Fixes a bug label May 13, 2025

@BenHenningBenHenning left a comment

Copy link
Copy Markdown
CollaboratorAuthor

Choose a reason for hiding this comment

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

Self-reviewed the latest (basically a new PR at this point).

@BenHenning

BenHenning commented May 13, 2025

Copy link
Copy Markdown
CollaboratorAuthor

Is there a bug for "At the time of the PR being opened, this couldn't be tested in the test environment for the experimental keyboard navigation plugin since there's a navigation connection issue there that needs to be resolved to test movement"?

I don't think there was a bug but RaspberryPiFoundation/blockly-keyboard-experimentation#516 fortunately fixed the underlying issue so I was able to properly test this with keyboard navigation & fix another bug that I found: RaspberryPiFoundation/blockly-keyboard-experimentation#521.

I've updated both the code and PR description accordingly, PTAL.

Edit: Though there are failing tests--taking a look.

Comment threadtests/mocha/layering_test.js Outdated

suite('dragging', function () {
test('moving an element to the drag layer adds it to the drag group', function () {
test.only('moving an element to the drag layer adds it to the drag group', function () {

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Reset to test( so you're not skipping all the other tests.

Copy link
Copy Markdown
CollaboratorAuthor

Choose a reason for hiding this comment

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

I forget this far too often until I do my self-review. :) Thanks & removed in latest.

@BenHenningBenHenning left a comment

Copy link
Copy Markdown
CollaboratorAuthor

Choose a reason for hiding this comment

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

Self-reviewed latest.

@BenHenning

Copy link
Copy Markdown
CollaboratorAuthor

Looks like tests are now both running and passing. PTAL @rachel-fenichel.

@BenHenning
BenHenning merged commit e34a969 into RaspberryPiFoundation:rc/v12.0.0May 13, 2025
@BenHenning
BenHenning deleted the fix-selection-lost-on-drag branch May 13, 2025 21:38
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

PR: fixFixes a bug

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Dragging blocks stops their selection highlight

2 participants

@BenHenning@rachel-fenichel
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
Skip to content

fix: Ensure selection stays when dragging blocks, comments, and bubbles - #9034

Merged
BenHenning merged 9 commits into
RaspberryPiFoundation:rc/v12.0.0from
BenHenning:fix-selection-lost-on-drag
May 13, 2025
Merged

fix: Ensure selection stays when dragging blocks, comments, and bubbles#9034
BenHenning merged 9 commits into
RaspberryPiFoundation:rc/v12.0.0from
BenHenning:fix-selection-lost-on-drag

Conversation

@BenHenning

@BenHenningBenHenning commented May 12, 2025

Copy link
Copy Markdown
Collaborator

The basics

The details

Resolves

Fixes#9027
FixesRaspberryPiFoundation/blockly-keyboard-experimentation#521

Proposed Changes

Ensure that a block & workspace comment being dragged are properly focused mid-drag.

Reason for Changes

Focus seems to be lost due to the element being moved to the drag layer, so re-focusing the element ensures that it remains both actively focused and selected while dragging. This applies to both blocks and workspace comments, and theoretically bubbles (though that's only for an event basis since they don't actually have a selection highlight).

The regressions were likely caused when block and comment selection was moved to be fully synced based on active focus.

Note that there are also changes for the selection block path. It was noticed when trying to fixRaspberryPiFoundation/blockly-keyboard-experimentation#521 that since a selection highlight is a complete copy of a block's path it was also copying the ID and CSS state for that block. It just so happened that the block was actually receiving passive focus at the time of re-render that generated the selection highlight and thus that state took precedence in the new path object. This was likely due to rendering happening while moving the block over to the drag layer (and thus during its brief window of having lost focus). The fix is to simply ensure that all focus-related attributes are properly removed from the cloned object.

There is one other location where a block's path is cloned: block_animations.ts for disposing of the block. I suspect this won't actually require the additional attribute removal being done for the selection highlight, so this case hasn't been fixed. My local testing of block deletion seems to suggest it looks correct, but there could well be edge cases that I haven't considered.

Test Coverage

This has been manually verified in Core's simple playground and in the keyboard navigation plugin's test environment.

It would be helpful to add a new test case for the underlying problem (i.e. ensuring that the block holds focus mid-drag) as part of resolving #8915.

Documentation

No new documentation should need to be added.

Additional Information

This was found during the development of RaspberryPiFoundation/blockly-keyboard-experimentation#511.

@github-actionsgithub-actionsBot added PR: fix Fixes a bug and removed PR: fix Fixes a bug labels May 12, 2025
@google-cla

Copy link
Copy Markdown

Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

View this failed invocation of the CLA check for more information.

For the most up to date status, view the checks section at the bottom of the pull request.

@github-actionsgithub-actionsBot removed the PR: fix Fixes a bug label May 12, 2025
@BenHenning
BenHenning changed the base branch from develop to rc/v12.0.0May 12, 2025 23:30
@github-actionsgithub-actionsBot added PR: fix Fixes a bug and removed PR: fix Fixes a bug labels May 12, 2025

@BenHenningBenHenning left a comment

Copy link
Copy Markdown
CollaboratorAuthor

Choose a reason for hiding this comment

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

Self-reviewed changes (added some additional comment lines for clarity).

@BenHenning
BenHenning marked this pull request as ready for review May 12, 2025 23:34
@BenHenning
BenHenning requested a review from a team as a code ownerMay 12, 2025 23:34
@BenHenning
BenHenning enabled auto-merge (squash) May 12, 2025 23:35
@rachel-fenichel

Copy link
Copy Markdown
Collaborator

Is there a bug for "At the time of the PR being opened, this couldn't be tested in the test environment for the experimental keyboard navigation plugin since there's a navigation connection issue there that needs to be resolved to test movement"?

Comment threadcore/dragging/block_drag_strategy.ts Outdated

// Since moving the block to the drag layer will cause it to lose focus,
// ensure it regains focus (to enable the block's selection highlight).
getFocusManager().focusNode(this.block);

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Question: should this be done in moveToDragLayer (and moveOffDragLayer) instead of in the drag strategy?

Copy link
Copy Markdown
CollaboratorAuthor

Choose a reason for hiding this comment

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

Good idea. This actually made me realize that workspace comments had the same problem, so this shift actually fixes those, too.

@BenHenningBenHenning changed the title fix: Ensure selection stays when dragging blocksfix: Ensure selection stays when dragging blocks, comments, and bubblesMay 13, 2025
@github-actionsgithub-actionsBot added PR: fix Fixes a bug and removed PR: fix Fixes a bug labels May 13, 2025
@github-actionsgithub-actionsBot removed the PR: fix Fixes a bug label May 13, 2025
@github-actionsgithub-actionsBot added the PR: fix Fixes a bug label May 13, 2025

@BenHenningBenHenning left a comment

Copy link
Copy Markdown
CollaboratorAuthor

Choose a reason for hiding this comment

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

Self-reviewed the latest (basically a new PR at this point).

@BenHenning

BenHenning commented May 13, 2025

Copy link
Copy Markdown
CollaboratorAuthor

Is there a bug for "At the time of the PR being opened, this couldn't be tested in the test environment for the experimental keyboard navigation plugin since there's a navigation connection issue there that needs to be resolved to test movement"?

I don't think there was a bug but RaspberryPiFoundation/blockly-keyboard-experimentation#516 fortunately fixed the underlying issue so I was able to properly test this with keyboard navigation & fix another bug that I found: RaspberryPiFoundation/blockly-keyboard-experimentation#521.

I've updated both the code and PR description accordingly, PTAL.

Edit: Though there are failing tests--taking a look.

Comment threadtests/mocha/layering_test.js Outdated

suite('dragging', function () {
test('moving an element to the drag layer adds it to the drag group', function () {
test.only('moving an element to the drag layer adds it to the drag group', function () {

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Reset to test( so you're not skipping all the other tests.

Copy link
Copy Markdown
CollaboratorAuthor

Choose a reason for hiding this comment

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

I forget this far too often until I do my self-review. :) Thanks & removed in latest.

@BenHenningBenHenning left a comment

Copy link
Copy Markdown
CollaboratorAuthor

Choose a reason for hiding this comment

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

Self-reviewed latest.

@BenHenning

Copy link
Copy Markdown
CollaboratorAuthor

Looks like tests are now both running and passing. PTAL @rachel-fenichel.

@BenHenning
BenHenning merged commit e34a969 into RaspberryPiFoundation:rc/v12.0.0May 13, 2025
@BenHenning
BenHenning deleted the fix-selection-lost-on-drag branch May 13, 2025 21:38
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

PR: fixFixes a bug

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Dragging blocks stops their selection highlight

2 participants

@BenHenning@rachel-fenichel
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix"); } } catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

fix: Ensure selection stays when dragging blocks, comments, and bubbles - #9034

Merged
BenHenning merged 9 commits into
RaspberryPiFoundation:rc/v12.0.0from
BenHenning:fix-selection-lost-on-drag
May 13, 2025
Merged

fix: Ensure selection stays when dragging blocks, comments, and bubbles#9034
BenHenning merged 9 commits into
RaspberryPiFoundation:rc/v12.0.0from
BenHenning:fix-selection-lost-on-drag

Conversation

@BenHenning

@BenHenningBenHenning commented May 12, 2025

Copy link
Copy Markdown
Collaborator

The basics

The details

Resolves

Fixes#9027
FixesRaspberryPiFoundation/blockly-keyboard-experimentation#521

Proposed Changes

Ensure that a block & workspace comment being dragged are properly focused mid-drag.

Reason for Changes

Focus seems to be lost due to the element being moved to the drag layer, so re-focusing the element ensures that it remains both actively focused and selected while dragging. This applies to both blocks and workspace comments, and theoretically bubbles (though that's only for an event basis since they don't actually have a selection highlight).

The regressions were likely caused when block and comment selection was moved to be fully synced based on active focus.

Note that there are also changes for the selection block path. It was noticed when trying to fixRaspberryPiFoundation/blockly-keyboard-experimentation#521 that since a selection highlight is a complete copy of a block's path it was also copying the ID and CSS state for that block. It just so happened that the block was actually receiving passive focus at the time of re-render that generated the selection highlight and thus that state took precedence in the new path object. This was likely due to rendering happening while moving the block over to the drag layer (and thus during its brief window of having lost focus). The fix is to simply ensure that all focus-related attributes are properly removed from the cloned object.

There is one other location where a block's path is cloned: block_animations.ts for disposing of the block. I suspect this won't actually require the additional attribute removal being done for the selection highlight, so this case hasn't been fixed. My local testing of block deletion seems to suggest it looks correct, but there could well be edge cases that I haven't considered.

Test Coverage

This has been manually verified in Core's simple playground and in the keyboard navigation plugin's test environment.

It would be helpful to add a new test case for the underlying problem (i.e. ensuring that the block holds focus mid-drag) as part of resolving #8915.

Documentation

No new documentation should need to be added.

Additional Information

This was found during the development of RaspberryPiFoundation/blockly-keyboard-experimentation#511.

@github-actionsgithub-actionsBot added PR: fix Fixes a bug and removed PR: fix Fixes a bug labels May 12, 2025
@google-cla

Copy link
Copy Markdown

Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

View this failed invocation of the CLA check for more information.

For the most up to date status, view the checks section at the bottom of the pull request.

@github-actionsgithub-actionsBot removed the PR: fix Fixes a bug label May 12, 2025
@BenHenning
BenHenning changed the base branch from develop to rc/v12.0.0May 12, 2025 23:30
@github-actionsgithub-actionsBot added PR: fix Fixes a bug and removed PR: fix Fixes a bug labels May 12, 2025

@BenHenningBenHenning left a comment

Copy link
Copy Markdown
CollaboratorAuthor

Choose a reason for hiding this comment

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

Self-reviewed changes (added some additional comment lines for clarity).

@BenHenning
BenHenning marked this pull request as ready for review May 12, 2025 23:34
@BenHenning
BenHenning requested a review from a team as a code ownerMay 12, 2025 23:34
@BenHenning
BenHenning enabled auto-merge (squash) May 12, 2025 23:35
@rachel-fenichel

Copy link
Copy Markdown
Collaborator

Is there a bug for "At the time of the PR being opened, this couldn't be tested in the test environment for the experimental keyboard navigation plugin since there's a navigation connection issue there that needs to be resolved to test movement"?

Comment threadcore/dragging/block_drag_strategy.ts Outdated

// Since moving the block to the drag layer will cause it to lose focus,
// ensure it regains focus (to enable the block's selection highlight).
getFocusManager().focusNode(this.block);

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Question: should this be done in moveToDragLayer (and moveOffDragLayer) instead of in the drag strategy?

Copy link
Copy Markdown
CollaboratorAuthor

Choose a reason for hiding this comment

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

Good idea. This actually made me realize that workspace comments had the same problem, so this shift actually fixes those, too.

@BenHenningBenHenning changed the title fix: Ensure selection stays when dragging blocksfix: Ensure selection stays when dragging blocks, comments, and bubblesMay 13, 2025
@github-actionsgithub-actionsBot added PR: fix Fixes a bug and removed PR: fix Fixes a bug labels May 13, 2025
@github-actionsgithub-actionsBot removed the PR: fix Fixes a bug label May 13, 2025
@github-actionsgithub-actionsBot added the PR: fix Fixes a bug label May 13, 2025

@BenHenningBenHenning left a comment

Copy link
Copy Markdown
CollaboratorAuthor

Choose a reason for hiding this comment

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

Self-reviewed the latest (basically a new PR at this point).

@BenHenning

BenHenning commented May 13, 2025

Copy link
Copy Markdown
CollaboratorAuthor

Is there a bug for "At the time of the PR being opened, this couldn't be tested in the test environment for the experimental keyboard navigation plugin since there's a navigation connection issue there that needs to be resolved to test movement"?

I don't think there was a bug but RaspberryPiFoundation/blockly-keyboard-experimentation#516 fortunately fixed the underlying issue so I was able to properly test this with keyboard navigation & fix another bug that I found: RaspberryPiFoundation/blockly-keyboard-experimentation#521.

I've updated both the code and PR description accordingly, PTAL.

Edit: Though there are failing tests--taking a look.

Comment threadtests/mocha/layering_test.js Outdated

suite('dragging', function () {
test('moving an element to the drag layer adds it to the drag group', function () {
test.only('moving an element to the drag layer adds it to the drag group', function () {

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Reset to test( so you're not skipping all the other tests.

Copy link
Copy Markdown
CollaboratorAuthor

Choose a reason for hiding this comment

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

I forget this far too often until I do my self-review. :) Thanks & removed in latest.

@BenHenningBenHenning left a comment

Copy link
Copy Markdown
CollaboratorAuthor

Choose a reason for hiding this comment

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

Self-reviewed latest.

@BenHenning

Copy link
Copy Markdown
CollaboratorAuthor

Looks like tests are now both running and passing. PTAL @rachel-fenichel.

@BenHenning
BenHenning merged commit e34a969 into RaspberryPiFoundation:rc/v12.0.0May 13, 2025
@BenHenning
BenHenning deleted the fix-selection-lost-on-drag branch May 13, 2025 21:38
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

PR: fixFixes a bug

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Dragging blocks stops their selection highlight

2 participants

@BenHenning@rachel-fenichel
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms"); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

fix: Ensure selection stays when dragging blocks, comments, and bubbles - #9034

Merged
BenHenning merged 9 commits into
RaspberryPiFoundation:rc/v12.0.0from
BenHenning:fix-selection-lost-on-drag
May 13, 2025
Merged

fix: Ensure selection stays when dragging blocks, comments, and bubbles#9034
BenHenning merged 9 commits into
RaspberryPiFoundation:rc/v12.0.0from
BenHenning:fix-selection-lost-on-drag

Conversation

@BenHenning

@BenHenningBenHenning commented May 12, 2025

Copy link
Copy Markdown
Collaborator

The basics

The details

Resolves

Fixes#9027
FixesRaspberryPiFoundation/blockly-keyboard-experimentation#521

Proposed Changes

Ensure that a block & workspace comment being dragged are properly focused mid-drag.

Reason for Changes

Focus seems to be lost due to the element being moved to the drag layer, so re-focusing the element ensures that it remains both actively focused and selected while dragging. This applies to both blocks and workspace comments, and theoretically bubbles (though that's only for an event basis since they don't actually have a selection highlight).

The regressions were likely caused when block and comment selection was moved to be fully synced based on active focus.

Note that there are also changes for the selection block path. It was noticed when trying to fixRaspberryPiFoundation/blockly-keyboard-experimentation#521 that since a selection highlight is a complete copy of a block's path it was also copying the ID and CSS state for that block. It just so happened that the block was actually receiving passive focus at the time of re-render that generated the selection highlight and thus that state took precedence in the new path object. This was likely due to rendering happening while moving the block over to the drag layer (and thus during its brief window of having lost focus). The fix is to simply ensure that all focus-related attributes are properly removed from the cloned object.

There is one other location where a block's path is cloned: block_animations.ts for disposing of the block. I suspect this won't actually require the additional attribute removal being done for the selection highlight, so this case hasn't been fixed. My local testing of block deletion seems to suggest it looks correct, but there could well be edge cases that I haven't considered.

Test Coverage

This has been manually verified in Core's simple playground and in the keyboard navigation plugin's test environment.

It would be helpful to add a new test case for the underlying problem (i.e. ensuring that the block holds focus mid-drag) as part of resolving #8915.

Documentation

No new documentation should need to be added.

Additional Information

This was found during the development of RaspberryPiFoundation/blockly-keyboard-experimentation#511.

@github-actionsgithub-actionsBot added PR: fix Fixes a bug and removed PR: fix Fixes a bug labels May 12, 2025
@google-cla

Copy link
Copy Markdown

Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

View this failed invocation of the CLA check for more information.

For the most up to date status, view the checks section at the bottom of the pull request.

@github-actionsgithub-actionsBot removed the PR: fix Fixes a bug label May 12, 2025
@BenHenning
BenHenning changed the base branch from develop to rc/v12.0.0May 12, 2025 23:30
@github-actionsgithub-actionsBot added PR: fix Fixes a bug and removed PR: fix Fixes a bug labels May 12, 2025

@BenHenningBenHenning left a comment

Copy link
Copy Markdown
CollaboratorAuthor

Choose a reason for hiding this comment

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

Self-reviewed changes (added some additional comment lines for clarity).

@BenHenning
BenHenning marked this pull request as ready for review May 12, 2025 23:34
@BenHenning
BenHenning requested a review from a team as a code ownerMay 12, 2025 23:34
@BenHenning
BenHenning enabled auto-merge (squash) May 12, 2025 23:35
@rachel-fenichel

Copy link
Copy Markdown
Collaborator

Is there a bug for "At the time of the PR being opened, this couldn't be tested in the test environment for the experimental keyboard navigation plugin since there's a navigation connection issue there that needs to be resolved to test movement"?

Comment threadcore/dragging/block_drag_strategy.ts Outdated

// Since moving the block to the drag layer will cause it to lose focus,
// ensure it regains focus (to enable the block's selection highlight).
getFocusManager().focusNode(this.block);

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Question: should this be done in moveToDragLayer (and moveOffDragLayer) instead of in the drag strategy?

Copy link
Copy Markdown
CollaboratorAuthor

Choose a reason for hiding this comment

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

Good idea. This actually made me realize that workspace comments had the same problem, so this shift actually fixes those, too.

@BenHenningBenHenning changed the title fix: Ensure selection stays when dragging blocksfix: Ensure selection stays when dragging blocks, comments, and bubblesMay 13, 2025
@github-actionsgithub-actionsBot added PR: fix Fixes a bug and removed PR: fix Fixes a bug labels May 13, 2025
@github-actionsgithub-actionsBot removed the PR: fix Fixes a bug label May 13, 2025
@github-actionsgithub-actionsBot added the PR: fix Fixes a bug label May 13, 2025

@BenHenningBenHenning left a comment

Copy link
Copy Markdown
CollaboratorAuthor

Choose a reason for hiding this comment

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

Self-reviewed the latest (basically a new PR at this point).

@BenHenning

BenHenning commented May 13, 2025

Copy link
Copy Markdown
CollaboratorAuthor

Is there a bug for "At the time of the PR being opened, this couldn't be tested in the test environment for the experimental keyboard navigation plugin since there's a navigation connection issue there that needs to be resolved to test movement"?

I don't think there was a bug but RaspberryPiFoundation/blockly-keyboard-experimentation#516 fortunately fixed the underlying issue so I was able to properly test this with keyboard navigation & fix another bug that I found: RaspberryPiFoundation/blockly-keyboard-experimentation#521.

I've updated both the code and PR description accordingly, PTAL.

Edit: Though there are failing tests--taking a look.

Comment threadtests/mocha/layering_test.js Outdated

suite('dragging', function () {
test('moving an element to the drag layer adds it to the drag group', function () {
test.only('moving an element to the drag layer adds it to the drag group', function () {

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Reset to test( so you're not skipping all the other tests.

Copy link
Copy Markdown
CollaboratorAuthor

Choose a reason for hiding this comment

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

I forget this far too often until I do my self-review. :) Thanks & removed in latest.

@BenHenningBenHenning left a comment

Copy link
Copy Markdown
CollaboratorAuthor

Choose a reason for hiding this comment

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

Self-reviewed latest.

@BenHenning

Copy link
Copy Markdown
CollaboratorAuthor

Looks like tests are now both running and passing. PTAL @rachel-fenichel.

@BenHenning
BenHenning merged commit e34a969 into RaspberryPiFoundation:rc/v12.0.0May 13, 2025
@BenHenning
BenHenning deleted the fix-selection-lost-on-drag branch May 13, 2025 21:38
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

PR: fixFixes a bug

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Dragging blocks stops their selection highlight

2 participants

@BenHenning@rachel-fenichel
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links"); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + '
Skip to content

fix: Ensure selection stays when dragging blocks, comments, and bubbles - #9034

Merged
BenHenning merged 9 commits into
RaspberryPiFoundation:rc/v12.0.0from
BenHenning:fix-selection-lost-on-drag
May 13, 2025
Merged

fix: Ensure selection stays when dragging blocks, comments, and bubbles#9034
BenHenning merged 9 commits into
RaspberryPiFoundation:rc/v12.0.0from
BenHenning:fix-selection-lost-on-drag

Conversation

@BenHenning

@BenHenningBenHenning commented May 12, 2025

Copy link
Copy Markdown
Collaborator

The basics

The details

Resolves

Fixes#9027
FixesRaspberryPiFoundation/blockly-keyboard-experimentation#521

Proposed Changes

Ensure that a block & workspace comment being dragged are properly focused mid-drag.

Reason for Changes

Focus seems to be lost due to the element being moved to the drag layer, so re-focusing the element ensures that it remains both actively focused and selected while dragging. This applies to both blocks and workspace comments, and theoretically bubbles (though that's only for an event basis since they don't actually have a selection highlight).

The regressions were likely caused when block and comment selection was moved to be fully synced based on active focus.

Note that there are also changes for the selection block path. It was noticed when trying to fixRaspberryPiFoundation/blockly-keyboard-experimentation#521 that since a selection highlight is a complete copy of a block's path it was also copying the ID and CSS state for that block. It just so happened that the block was actually receiving passive focus at the time of re-render that generated the selection highlight and thus that state took precedence in the new path object. This was likely due to rendering happening while moving the block over to the drag layer (and thus during its brief window of having lost focus). The fix is to simply ensure that all focus-related attributes are properly removed from the cloned object.

There is one other location where a block's path is cloned: block_animations.ts for disposing of the block. I suspect this won't actually require the additional attribute removal being done for the selection highlight, so this case hasn't been fixed. My local testing of block deletion seems to suggest it looks correct, but there could well be edge cases that I haven't considered.

Test Coverage

This has been manually verified in Core's simple playground and in the keyboard navigation plugin's test environment.

It would be helpful to add a new test case for the underlying problem (i.e. ensuring that the block holds focus mid-drag) as part of resolving #8915.

Documentation

No new documentation should need to be added.

Additional Information

This was found during the development of RaspberryPiFoundation/blockly-keyboard-experimentation#511.

@github-actionsgithub-actionsBot added PR: fix Fixes a bug and removed PR: fix Fixes a bug labels May 12, 2025
@google-cla

Copy link
Copy Markdown

Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

View this failed invocation of the CLA check for more information.

For the most up to date status, view the checks section at the bottom of the pull request.

@github-actionsgithub-actionsBot removed the PR: fix Fixes a bug label May 12, 2025
@BenHenning
BenHenning changed the base branch from develop to rc/v12.0.0May 12, 2025 23:30
@github-actionsgithub-actionsBot added PR: fix Fixes a bug and removed PR: fix Fixes a bug labels May 12, 2025

@BenHenningBenHenning left a comment

Copy link
Copy Markdown
CollaboratorAuthor

Choose a reason for hiding this comment

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

Self-reviewed changes (added some additional comment lines for clarity).

@BenHenning
BenHenning marked this pull request as ready for review May 12, 2025 23:34
@BenHenning
BenHenning requested a review from a team as a code ownerMay 12, 2025 23:34
@BenHenning
BenHenning enabled auto-merge (squash) May 12, 2025 23:35
@rachel-fenichel

Copy link
Copy Markdown
Collaborator

Is there a bug for "At the time of the PR being opened, this couldn't be tested in the test environment for the experimental keyboard navigation plugin since there's a navigation connection issue there that needs to be resolved to test movement"?

Comment threadcore/dragging/block_drag_strategy.ts Outdated

// Since moving the block to the drag layer will cause it to lose focus,
// ensure it regains focus (to enable the block's selection highlight).
getFocusManager().focusNode(this.block);

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Question: should this be done in moveToDragLayer (and moveOffDragLayer) instead of in the drag strategy?

Copy link
Copy Markdown
CollaboratorAuthor

Choose a reason for hiding this comment

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

Good idea. This actually made me realize that workspace comments had the same problem, so this shift actually fixes those, too.

@BenHenningBenHenning changed the title fix: Ensure selection stays when dragging blocksfix: Ensure selection stays when dragging blocks, comments, and bubblesMay 13, 2025
@github-actionsgithub-actionsBot added PR: fix Fixes a bug and removed PR: fix Fixes a bug labels May 13, 2025
@github-actionsgithub-actionsBot removed the PR: fix Fixes a bug label May 13, 2025
@github-actionsgithub-actionsBot added the PR: fix Fixes a bug label May 13, 2025

@BenHenningBenHenning left a comment

Copy link
Copy Markdown
CollaboratorAuthor

Choose a reason for hiding this comment

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

Self-reviewed the latest (basically a new PR at this point).

@BenHenning

BenHenning commented May 13, 2025

Copy link
Copy Markdown
CollaboratorAuthor

Is there a bug for "At the time of the PR being opened, this couldn't be tested in the test environment for the experimental keyboard navigation plugin since there's a navigation connection issue there that needs to be resolved to test movement"?

I don't think there was a bug but RaspberryPiFoundation/blockly-keyboard-experimentation#516 fortunately fixed the underlying issue so I was able to properly test this with keyboard navigation & fix another bug that I found: RaspberryPiFoundation/blockly-keyboard-experimentation#521.

I've updated both the code and PR description accordingly, PTAL.

Edit: Though there are failing tests--taking a look.

Comment threadtests/mocha/layering_test.js Outdated

suite('dragging', function () {
test('moving an element to the drag layer adds it to the drag group', function () {
test.only('moving an element to the drag layer adds it to the drag group', function () {

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Reset to test( so you're not skipping all the other tests.

Copy link
Copy Markdown
CollaboratorAuthor

Choose a reason for hiding this comment

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

I forget this far too often until I do my self-review. :) Thanks & removed in latest.

@BenHenningBenHenning left a comment

Copy link
Copy Markdown
CollaboratorAuthor

Choose a reason for hiding this comment

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

Self-reviewed latest.

@BenHenning

Copy link
Copy Markdown
CollaboratorAuthor

Looks like tests are now both running and passing. PTAL @rachel-fenichel.

@BenHenning
BenHenning merged commit e34a969 into RaspberryPiFoundation:rc/v12.0.0May 13, 2025
@BenHenning
BenHenning deleted the fix-selection-lost-on-drag branch May 13, 2025 21:38
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

PR: fixFixes a bug

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Dragging blocks stops their selection highlight

2 participants

@BenHenning@rachel-fenichel
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default"); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

fix: Ensure selection stays when dragging blocks, comments, and bubbles - #9034

Merged
BenHenning merged 9 commits into
RaspberryPiFoundation:rc/v12.0.0from
BenHenning:fix-selection-lost-on-drag
May 13, 2025
Merged

fix: Ensure selection stays when dragging blocks, comments, and bubbles#9034
BenHenning merged 9 commits into
RaspberryPiFoundation:rc/v12.0.0from
BenHenning:fix-selection-lost-on-drag

Conversation

@BenHenning

@BenHenningBenHenning commented May 12, 2025

Copy link
Copy Markdown
Collaborator

The basics

The details

Resolves

Fixes#9027
FixesRaspberryPiFoundation/blockly-keyboard-experimentation#521

Proposed Changes

Ensure that a block & workspace comment being dragged are properly focused mid-drag.

Reason for Changes

Focus seems to be lost due to the element being moved to the drag layer, so re-focusing the element ensures that it remains both actively focused and selected while dragging. This applies to both blocks and workspace comments, and theoretically bubbles (though that's only for an event basis since they don't actually have a selection highlight).

The regressions were likely caused when block and comment selection was moved to be fully synced based on active focus.

Note that there are also changes for the selection block path. It was noticed when trying to fixRaspberryPiFoundation/blockly-keyboard-experimentation#521 that since a selection highlight is a complete copy of a block's path it was also copying the ID and CSS state for that block. It just so happened that the block was actually receiving passive focus at the time of re-render that generated the selection highlight and thus that state took precedence in the new path object. This was likely due to rendering happening while moving the block over to the drag layer (and thus during its brief window of having lost focus). The fix is to simply ensure that all focus-related attributes are properly removed from the cloned object.

There is one other location where a block's path is cloned: block_animations.ts for disposing of the block. I suspect this won't actually require the additional attribute removal being done for the selection highlight, so this case hasn't been fixed. My local testing of block deletion seems to suggest it looks correct, but there could well be edge cases that I haven't considered.

Test Coverage

This has been manually verified in Core's simple playground and in the keyboard navigation plugin's test environment.

It would be helpful to add a new test case for the underlying problem (i.e. ensuring that the block holds focus mid-drag) as part of resolving #8915.

Documentation

No new documentation should need to be added.

Additional Information

This was found during the development of RaspberryPiFoundation/blockly-keyboard-experimentation#511.

@github-actionsgithub-actionsBot added PR: fix Fixes a bug and removed PR: fix Fixes a bug labels May 12, 2025
@google-cla

Copy link
Copy Markdown

Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

View this failed invocation of the CLA check for more information.

For the most up to date status, view the checks section at the bottom of the pull request.

@github-actionsgithub-actionsBot removed the PR: fix Fixes a bug label May 12, 2025
@BenHenning
BenHenning changed the base branch from develop to rc/v12.0.0May 12, 2025 23:30
@github-actionsgithub-actionsBot added PR: fix Fixes a bug and removed PR: fix Fixes a bug labels May 12, 2025

@BenHenningBenHenning left a comment

Copy link
Copy Markdown
CollaboratorAuthor

Choose a reason for hiding this comment

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

Self-reviewed changes (added some additional comment lines for clarity).

@BenHenning
BenHenning marked this pull request as ready for review May 12, 2025 23:34
@BenHenning
BenHenning requested a review from a team as a code ownerMay 12, 2025 23:34
@BenHenning
BenHenning enabled auto-merge (squash) May 12, 2025 23:35
@rachel-fenichel

Copy link
Copy Markdown
Collaborator

Is there a bug for "At the time of the PR being opened, this couldn't be tested in the test environment for the experimental keyboard navigation plugin since there's a navigation connection issue there that needs to be resolved to test movement"?

Comment threadcore/dragging/block_drag_strategy.ts Outdated

// Since moving the block to the drag layer will cause it to lose focus,
// ensure it regains focus (to enable the block's selection highlight).
getFocusManager().focusNode(this.block);

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Question: should this be done in moveToDragLayer (and moveOffDragLayer) instead of in the drag strategy?

Copy link
Copy Markdown
CollaboratorAuthor

Choose a reason for hiding this comment

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

Good idea. This actually made me realize that workspace comments had the same problem, so this shift actually fixes those, too.

@BenHenningBenHenning changed the title fix: Ensure selection stays when dragging blocksfix: Ensure selection stays when dragging blocks, comments, and bubblesMay 13, 2025
@github-actionsgithub-actionsBot added PR: fix Fixes a bug and removed PR: fix Fixes a bug labels May 13, 2025
@github-actionsgithub-actionsBot removed the PR: fix Fixes a bug label May 13, 2025
@github-actionsgithub-actionsBot added the PR: fix Fixes a bug label May 13, 2025

@BenHenningBenHenning left a comment

Copy link
Copy Markdown
CollaboratorAuthor

Choose a reason for hiding this comment

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

Self-reviewed the latest (basically a new PR at this point).

@BenHenning

BenHenning commented May 13, 2025

Copy link
Copy Markdown
CollaboratorAuthor

Is there a bug for "At the time of the PR being opened, this couldn't be tested in the test environment for the experimental keyboard navigation plugin since there's a navigation connection issue there that needs to be resolved to test movement"?

I don't think there was a bug but RaspberryPiFoundation/blockly-keyboard-experimentation#516 fortunately fixed the underlying issue so I was able to properly test this with keyboard navigation & fix another bug that I found: RaspberryPiFoundation/blockly-keyboard-experimentation#521.

I've updated both the code and PR description accordingly, PTAL.

Edit: Though there are failing tests--taking a look.

Comment threadtests/mocha/layering_test.js Outdated

suite('dragging', function () {
test('moving an element to the drag layer adds it to the drag group', function () {
test.only('moving an element to the drag layer adds it to the drag group', function () {

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Reset to test( so you're not skipping all the other tests.

Copy link
Copy Markdown
CollaboratorAuthor

Choose a reason for hiding this comment

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

I forget this far too often until I do my self-review. :) Thanks & removed in latest.

@BenHenningBenHenning left a comment

Copy link
Copy Markdown
CollaboratorAuthor

Choose a reason for hiding this comment

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

Self-reviewed latest.

@BenHenning

Copy link
Copy Markdown
CollaboratorAuthor

Looks like tests are now both running and passing. PTAL @rachel-fenichel.

@BenHenning
BenHenning merged commit e34a969 into RaspberryPiFoundation:rc/v12.0.0May 13, 2025
@BenHenning
BenHenning deleted the fix-selection-lost-on-drag branch May 13, 2025 21:38
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

PR: fixFixes a bug

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Dragging blocks stops their selection highlight

2 participants

@BenHenning@rachel-fenichel
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers"); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

fix: Ensure selection stays when dragging blocks, comments, and bubbles - #9034

Merged
BenHenning merged 9 commits into
RaspberryPiFoundation:rc/v12.0.0from
BenHenning:fix-selection-lost-on-drag
May 13, 2025
Merged

fix: Ensure selection stays when dragging blocks, comments, and bubbles#9034
BenHenning merged 9 commits into
RaspberryPiFoundation:rc/v12.0.0from
BenHenning:fix-selection-lost-on-drag

Conversation

@BenHenning

@BenHenningBenHenning commented May 12, 2025

Copy link
Copy Markdown
Collaborator

The basics

The details

Resolves

Fixes#9027
FixesRaspberryPiFoundation/blockly-keyboard-experimentation#521

Proposed Changes

Ensure that a block & workspace comment being dragged are properly focused mid-drag.

Reason for Changes

Focus seems to be lost due to the element being moved to the drag layer, so re-focusing the element ensures that it remains both actively focused and selected while dragging. This applies to both blocks and workspace comments, and theoretically bubbles (though that's only for an event basis since they don't actually have a selection highlight).

The regressions were likely caused when block and comment selection was moved to be fully synced based on active focus.

Note that there are also changes for the selection block path. It was noticed when trying to fixRaspberryPiFoundation/blockly-keyboard-experimentation#521 that since a selection highlight is a complete copy of a block's path it was also copying the ID and CSS state for that block. It just so happened that the block was actually receiving passive focus at the time of re-render that generated the selection highlight and thus that state took precedence in the new path object. This was likely due to rendering happening while moving the block over to the drag layer (and thus during its brief window of having lost focus). The fix is to simply ensure that all focus-related attributes are properly removed from the cloned object.

There is one other location where a block's path is cloned: block_animations.ts for disposing of the block. I suspect this won't actually require the additional attribute removal being done for the selection highlight, so this case hasn't been fixed. My local testing of block deletion seems to suggest it looks correct, but there could well be edge cases that I haven't considered.

Test Coverage

This has been manually verified in Core's simple playground and in the keyboard navigation plugin's test environment.

It would be helpful to add a new test case for the underlying problem (i.e. ensuring that the block holds focus mid-drag) as part of resolving #8915.

Documentation

No new documentation should need to be added.

Additional Information

This was found during the development of RaspberryPiFoundation/blockly-keyboard-experimentation#511.

@github-actionsgithub-actionsBot added PR: fix Fixes a bug and removed PR: fix Fixes a bug labels May 12, 2025
@google-cla

Copy link
Copy Markdown

Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

View this failed invocation of the CLA check for more information.

For the most up to date status, view the checks section at the bottom of the pull request.

@github-actionsgithub-actionsBot removed the PR: fix Fixes a bug label May 12, 2025
@BenHenning
BenHenning changed the base branch from develop to rc/v12.0.0May 12, 2025 23:30
@github-actionsgithub-actionsBot added PR: fix Fixes a bug and removed PR: fix Fixes a bug labels May 12, 2025

@BenHenningBenHenning left a comment

Copy link
Copy Markdown
CollaboratorAuthor

Choose a reason for hiding this comment

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

Self-reviewed changes (added some additional comment lines for clarity).

@BenHenning
BenHenning marked this pull request as ready for review May 12, 2025 23:34
@BenHenning
BenHenning requested a review from a team as a code ownerMay 12, 2025 23:34
@BenHenning
BenHenning enabled auto-merge (squash) May 12, 2025 23:35
@rachel-fenichel

Copy link
Copy Markdown
Collaborator

Is there a bug for "At the time of the PR being opened, this couldn't be tested in the test environment for the experimental keyboard navigation plugin since there's a navigation connection issue there that needs to be resolved to test movement"?

Comment threadcore/dragging/block_drag_strategy.ts Outdated

// Since moving the block to the drag layer will cause it to lose focus,
// ensure it regains focus (to enable the block's selection highlight).
getFocusManager().focusNode(this.block);

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Question: should this be done in moveToDragLayer (and moveOffDragLayer) instead of in the drag strategy?

Copy link
Copy Markdown
CollaboratorAuthor

Choose a reason for hiding this comment

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

Good idea. This actually made me realize that workspace comments had the same problem, so this shift actually fixes those, too.

@BenHenningBenHenning changed the title fix: Ensure selection stays when dragging blocksfix: Ensure selection stays when dragging blocks, comments, and bubblesMay 13, 2025
@github-actionsgithub-actionsBot added PR: fix Fixes a bug and removed PR: fix Fixes a bug labels May 13, 2025
@github-actionsgithub-actionsBot removed the PR: fix Fixes a bug label May 13, 2025
@github-actionsgithub-actionsBot added the PR: fix Fixes a bug label May 13, 2025

@BenHenningBenHenning left a comment

Copy link
Copy Markdown
CollaboratorAuthor

Choose a reason for hiding this comment

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

Self-reviewed the latest (basically a new PR at this point).

@BenHenning

BenHenning commented May 13, 2025

Copy link
Copy Markdown
CollaboratorAuthor

Is there a bug for "At the time of the PR being opened, this couldn't be tested in the test environment for the experimental keyboard navigation plugin since there's a navigation connection issue there that needs to be resolved to test movement"?

I don't think there was a bug but RaspberryPiFoundation/blockly-keyboard-experimentation#516 fortunately fixed the underlying issue so I was able to properly test this with keyboard navigation & fix another bug that I found: RaspberryPiFoundation/blockly-keyboard-experimentation#521.

I've updated both the code and PR description accordingly, PTAL.

Edit: Though there are failing tests--taking a look.

Comment threadtests/mocha/layering_test.js Outdated

suite('dragging', function () {
test('moving an element to the drag layer adds it to the drag group', function () {
test.only('moving an element to the drag layer adds it to the drag group', function () {

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Reset to test( so you're not skipping all the other tests.

Copy link
Copy Markdown
CollaboratorAuthor

Choose a reason for hiding this comment

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

I forget this far too often until I do my self-review. :) Thanks & removed in latest.

@BenHenningBenHenning left a comment

Copy link
Copy Markdown
CollaboratorAuthor

Choose a reason for hiding this comment

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

Self-reviewed latest.

@BenHenning

Copy link
Copy Markdown
CollaboratorAuthor

Looks like tests are now both running and passing. PTAL @rachel-fenichel.

@BenHenning
BenHenning merged commit e34a969 into RaspberryPiFoundation:rc/v12.0.0May 13, 2025
@BenHenning
BenHenning deleted the fix-selection-lost-on-drag branch May 13, 2025 21:38
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

PR: fixFixes a bug

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Dragging blocks stops their selection highlight

2 participants

@BenHenning@rachel-fenichel
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode"); } } catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); } })(); })();
Skip to content

fix: Ensure selection stays when dragging blocks, comments, and bubbles - #9034

Merged
BenHenning merged 9 commits into
RaspberryPiFoundation:rc/v12.0.0from
BenHenning:fix-selection-lost-on-drag
May 13, 2025
Merged

fix: Ensure selection stays when dragging blocks, comments, and bubbles#9034
BenHenning merged 9 commits into
RaspberryPiFoundation:rc/v12.0.0from
BenHenning:fix-selection-lost-on-drag

Conversation

@BenHenning

@BenHenningBenHenning commented May 12, 2025

Copy link
Copy Markdown
Collaborator

The basics

The details

Resolves

Fixes#9027
FixesRaspberryPiFoundation/blockly-keyboard-experimentation#521

Proposed Changes

Ensure that a block & workspace comment being dragged are properly focused mid-drag.

Reason for Changes

Focus seems to be lost due to the element being moved to the drag layer, so re-focusing the element ensures that it remains both actively focused and selected while dragging. This applies to both blocks and workspace comments, and theoretically bubbles (though that's only for an event basis since they don't actually have a selection highlight).

The regressions were likely caused when block and comment selection was moved to be fully synced based on active focus.

Note that there are also changes for the selection block path. It was noticed when trying to fixRaspberryPiFoundation/blockly-keyboard-experimentation#521 that since a selection highlight is a complete copy of a block's path it was also copying the ID and CSS state for that block. It just so happened that the block was actually receiving passive focus at the time of re-render that generated the selection highlight and thus that state took precedence in the new path object. This was likely due to rendering happening while moving the block over to the drag layer (and thus during its brief window of having lost focus). The fix is to simply ensure that all focus-related attributes are properly removed from the cloned object.

There is one other location where a block's path is cloned: block_animations.ts for disposing of the block. I suspect this won't actually require the additional attribute removal being done for the selection highlight, so this case hasn't been fixed. My local testing of block deletion seems to suggest it looks correct, but there could well be edge cases that I haven't considered.

Test Coverage

This has been manually verified in Core's simple playground and in the keyboard navigation plugin's test environment.

It would be helpful to add a new test case for the underlying problem (i.e. ensuring that the block holds focus mid-drag) as part of resolving #8915.

Documentation

No new documentation should need to be added.

Additional Information

This was found during the development of RaspberryPiFoundation/blockly-keyboard-experimentation#511.

@github-actionsgithub-actionsBot added PR: fix Fixes a bug and removed PR: fix Fixes a bug labels May 12, 2025
@google-cla

Copy link
Copy Markdown

Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

View this failed invocation of the CLA check for more information.

For the most up to date status, view the checks section at the bottom of the pull request.

@github-actionsgithub-actionsBot removed the PR: fix Fixes a bug label May 12, 2025
@BenHenning
BenHenning changed the base branch from develop to rc/v12.0.0May 12, 2025 23:30
@github-actionsgithub-actionsBot added PR: fix Fixes a bug and removed PR: fix Fixes a bug labels May 12, 2025

@BenHenningBenHenning left a comment

Copy link
Copy Markdown
CollaboratorAuthor

Choose a reason for hiding this comment

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

Self-reviewed changes (added some additional comment lines for clarity).

@BenHenning
BenHenning marked this pull request as ready for review May 12, 2025 23:34
@BenHenning
BenHenning requested a review from a team as a code ownerMay 12, 2025 23:34
@BenHenning
BenHenning enabled auto-merge (squash) May 12, 2025 23:35
@rachel-fenichel

Copy link
Copy Markdown
Collaborator

Is there a bug for "At the time of the PR being opened, this couldn't be tested in the test environment for the experimental keyboard navigation plugin since there's a navigation connection issue there that needs to be resolved to test movement"?

Comment threadcore/dragging/block_drag_strategy.ts Outdated

// Since moving the block to the drag layer will cause it to lose focus,
// ensure it regains focus (to enable the block's selection highlight).
getFocusManager().focusNode(this.block);

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Question: should this be done in moveToDragLayer (and moveOffDragLayer) instead of in the drag strategy?

Copy link
Copy Markdown
CollaboratorAuthor

Choose a reason for hiding this comment

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

Good idea. This actually made me realize that workspace comments had the same problem, so this shift actually fixes those, too.

@BenHenningBenHenning changed the title fix: Ensure selection stays when dragging blocksfix: Ensure selection stays when dragging blocks, comments, and bubblesMay 13, 2025
@github-actionsgithub-actionsBot added PR: fix Fixes a bug and removed PR: fix Fixes a bug labels May 13, 2025
@github-actionsgithub-actionsBot removed the PR: fix Fixes a bug label May 13, 2025
@github-actionsgithub-actionsBot added the PR: fix Fixes a bug label May 13, 2025

@BenHenningBenHenning left a comment

Copy link
Copy Markdown
CollaboratorAuthor

Choose a reason for hiding this comment

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

Self-reviewed the latest (basically a new PR at this point).

@BenHenning

BenHenning commented May 13, 2025

Copy link
Copy Markdown
CollaboratorAuthor

Is there a bug for "At the time of the PR being opened, this couldn't be tested in the test environment for the experimental keyboard navigation plugin since there's a navigation connection issue there that needs to be resolved to test movement"?

I don't think there was a bug but RaspberryPiFoundation/blockly-keyboard-experimentation#516 fortunately fixed the underlying issue so I was able to properly test this with keyboard navigation & fix another bug that I found: RaspberryPiFoundation/blockly-keyboard-experimentation#521.

I've updated both the code and PR description accordingly, PTAL.

Edit: Though there are failing tests--taking a look.

Comment threadtests/mocha/layering_test.js Outdated

suite('dragging', function () {
test('moving an element to the drag layer adds it to the drag group', function () {
test.only('moving an element to the drag layer adds it to the drag group', function () {

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Reset to test( so you're not skipping all the other tests.

Copy link
Copy Markdown
CollaboratorAuthor

Choose a reason for hiding this comment

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

I forget this far too often until I do my self-review. :) Thanks & removed in latest.

@BenHenningBenHenning left a comment

Copy link
Copy Markdown
CollaboratorAuthor

Choose a reason for hiding this comment

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

Self-reviewed latest.

@BenHenning

Copy link
Copy Markdown
CollaboratorAuthor

Looks like tests are now both running and passing. PTAL @rachel-fenichel.

@BenHenning
BenHenning merged commit e34a969 into RaspberryPiFoundation:rc/v12.0.0May 13, 2025
@BenHenning
BenHenning deleted the fix-selection-lost-on-drag branch May 13, 2025 21:38
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

PR: fixFixes a bug

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Dragging blocks stops their selection highlight

2 participants

@BenHenning@rachel-fenichel