Skip to content

Remove focus state for notes as expected #73130

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

Closed
wants to merge 5 commits into from
Closed

Remove focus state for notes as expected #73130

Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
aeb5f1c
Remove focus state for notes as expected
karthick-murugan Nov 10, 2025
c50c403
E2E failing tests
karthick-murugan Nov 10, 2025
26a9d47
Merge branch 'trunk' into individual-notes-focus-state
karthick-murugan Nov 10, 2025
387a4d5
JS Lint
karthick-murugan Nov 11, 2025
2f85ffe
e2e tests
karthick-murugan Nov 11, 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
36 changes: 35 additions & 1 deletion 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 @@ -59,13 +59,15 @@ export function Comments( {
reflowComments,
isFloating = false,
commentLastUpdated,
onClearSelection,
} ) {
const [ heights, setHeights ] = useState( {} );
const [ selectedThread, setSelectedThread ] = useState( null );
const [ boardOffsets, setBoardOffsets ] = useState( {} );
const [ blockRefs, setBlockRefs ] = useState( {} );

const { setCanvasMinHeight } = unlock( useDispatch( editorStore ) );
const { toggleBlockSpotlight } = unlock( useDispatch( blockEditorStore ) );
const { blockCommentId, selectedBlockClientId, orderedBlockIds } =
useSelect( ( select ) => {
const {
Expand Down Expand Up @@ -124,6 +126,28 @@ export function Comments( {
orderedBlockIds,
] );

// Clear selection and block spotlights when clicking outside notes.
const clearSelection = useCallback( () => {
if ( selectedThread ) {
// Find the thread that was selected to clear its spotlight.
const selectedThreadData = threads.find(
( t ) => t.id === selectedThread
);
if ( selectedThreadData?.blockClientId ) {
toggleBlockSpotlight( selectedThreadData.blockClientId, false );
}
}
setSelectedThread( null );
setNewNoteFormState( 'closed' );
}, [ selectedThread, threads, toggleBlockSpotlight, setNewNoteFormState ] );

// Expose clearSelection to parent component via callback.
useEffect( () => {
if ( onClearSelection ) {
onClearSelection( clearSelection );
}
}, [ clearSelection, onClearSelection ] );

const handleDelete = async ( comment ) => {
const currentIndex = threads.findIndex( ( t ) => t.id === comment.id );
const nextThread = threads[ currentIndex + 1 ];
Expand Down Expand Up @@ -463,7 +487,17 @@ function Thread( {
onMouseEnter={ onMouseEnter }
onMouseLeave={ onMouseLeave }
onFocus={ onMouseEnter }
onBlur={ onMouseLeave }
onBlur={ ( event ) => {
onMouseLeave();
// Collapse note when focus moves away from the thread.
if (
isSelected &&
event.relatedTarget &&
! event.currentTarget.contains( event.relatedTarget )
) {
unselectThread();
}
} }
onKeyDown={ ( event ) => {
if ( event.defaultPrevented ) {
return;
Expand Down
Loading