Skip to content

Notes: Collapse note on blur #73158

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
merged 14 commits into from
Nov 18, 2025
+82 −5
Merged

Notes: Collapse note on blur #73158

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
107a9ad
Notes: Collapse note on blur
t-hamano Nov 11, 2025
7672766
Update comment
t-hamano Nov 11, 2025
84a890c
WIP
t-hamano Nov 11, 2025
13ed27c
Don't debounce onBlur and onFocus
t-hamano Nov 12, 2025
8a423a4
Avoid prop drilling
t-hamano Nov 12, 2025
9a71a78
Simplify conditional statement
t-hamano Nov 12, 2025
f06d5a0
Update packages/editor/src/components/collab-sidebar/comments.js
t-hamano Nov 13, 2025
3ea134d
Merge branch 'trunk' into notes/on-blur-collapse
t-hamano Nov 13, 2025
ef4711c
Correctly handle onBlur event
t-hamano Nov 13, 2025
d9ab640
Add comment
t-hamano Nov 13, 2025
9986724
Fix comment
t-hamano Nov 13, 2025
c61dd5a
Fix double space
t-hamano Nov 14, 2025
cfd0506
Merge branch 'trunk' into notes/on-blur-collapse
t-hamano Nov 14, 2025
2aaacad
Always toggle block spotlight on note selection
t-hamano Nov 14, 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
62 changes: 57 additions & 5 deletions packages/editor/src/components/collab-sidebar/comments.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -470,6 +470,7 @@ function Thread( {
selectedThread,
commentLastUpdated,
} );
const isKeyboardTabbingRef = useRef( false );

const onMouseEnter = () => {
debouncedToggleBlockHighlight( thread.blockClientId, true );
Expand All @@ -479,13 +480,48 @@ function Thread( {
debouncedToggleBlockHighlight( thread.blockClientId, false );
};

const onFocus = () => {
toggleBlockHighlight( thread.blockClientId, true );
};

const onBlur = ( event ) => {
const isNoteFocused = event.relatedTarget?.closest(
'.editor-collab-sidebar-panel__thread'
);
const isDialogFocused =
event.relatedTarget?.closest( '[role="dialog"]' );
const isTabbing = isKeyboardTabbingRef.current;

// When another note is clicked, do nothing because the current note is automatically closed.
if ( isNoteFocused && ! isTabbing ) {
return;
}
// When deleting a note, a dialog appears, but the note should not be collapsed.
if ( isDialogFocused ) {
return;
}
// When tabbing, do nothing if the focus is within the current note.
if (
isTabbing &&
event.currentTarget.contains( event.relatedTarget )
) {
return;
}

// Closes a note that has lost focus when any of the following conditions are met:
// - An element other than a note is clicked.
// - Focus was lost by tabbing.
toggleBlockHighlight( thread.blockClientId, false );
unselectThread();
};

const handleCommentSelect = () => {
setNewNoteFormState( 'closed' );
setSelectedThread( thread.id );
toggleBlockSpotlight( thread.blockClientId, true );
if ( !! thread.blockClientId ) {
// Pass `null` as the second parameter to prevent focusing the block.
selectBlock( thread.blockClientId, null );
toggleBlockSpotlight( thread.blockClientId, true );
}
};

Expand Down Expand Up @@ -547,9 +583,20 @@ function Thread( {
onClick={ handleCommentSelect }
onMouseEnter={ onMouseEnter }
onMouseLeave={ onMouseLeave }
onFocus={ onMouseEnter }
onBlur={ onMouseLeave }
onKeyDown={ onKeyDown }
onFocus={ onFocus }
onBlur={ onBlur }
onKeyUp={ ( event ) => {
if ( event.key === 'Tab' ) {
isKeyboardTabbingRef.current = false;
}
} }
onKeyDown={ ( event ) => {
if ( event.key === 'Tab' ) {
isKeyboardTabbingRef.current = true;
} else {
onKeyDown( event );
}
} }
tabIndex={ 0 }
role="treeitem"
aria-label={ ariaLabel }
Expand Down Expand Up @@ -828,7 +875,12 @@ const CommentBoard = ( {
/>
}
/>
<Menu.Popover>
<Menu.Popover
// The menu popover is rendered in a portal, which causes focus to be
// lost and the note to be collapsed unintentionally. To prevent this,
// the popover should be rendered as an inline.
modal={ false }
>
{ moreActions.map( ( action ) => (
<Menu.Item
key={ action.id }
Expand Down
25 changes: 25 additions & 0 deletions test/e2e/specs/editor/various/block-comments.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -477,6 +477,31 @@ test.describe( 'Block Comments', () => {
await expect( thread ).toBeFocused();
} );

test( 'should collapse a comment when the focus moves outside the note', async ( {
page,
blockCommentUtils,
} ) => {
await blockCommentUtils.addBlockWithComment( {
type: 'core/heading',
attributes: { content: 'Testing block comments' },
comment: 'Test comment',
} );

const thread = page
.getByRole( 'region', {
name: 'Editor settings',
} )
.getByRole( 'treeitem', {
name: 'Note: Test comment',
} );

await thread.click();
await expect( thread ).toHaveAttribute( 'aria-expanded', 'true' );
await page.keyboard.press( 'Shift+Tab' );
await expect( thread ).not.toBeFocused();
await expect( thread ).toHaveAttribute( 'aria-expanded', 'false' );
} );

test( 'should have accessible name for the comment threads', async ( {
page,
blockCommentUtils,
Expand Down
Loading