Skip to content

Commit

Permalink
Focus link on popover close when newly added
Browse files Browse the repository at this point in the history
  • Loading branch information
jeryj committed Dec 20, 2024
1 parent 9bd8fd3 commit 9e0ec83
Showing 1 changed file with 15 additions and 0 deletions.
15 changes: 15 additions & 0 deletions packages/block-library/src/navigation-link/edit.js
Original file line number Diff line number Diff line change
Expand Up @@ -250,6 +250,9 @@ export default function NavigationLinkEdit( {
} = useDispatch( blockEditorStore );
// Have the link editing ui open on mount if the block was just added.
const [ isLinkOpen, setIsLinkOpen ] = useState( isSelected );
// If the link ui was opened because it was just added, we need to return focus to the block instead of
// the appender when it is closed.
const focusBlockOnLinkCloseRef = useRef( isLinkOpen );
// Store what element opened the popover, so we know where to return focus to (toolbar button vs navigation link text)
// Use internal state instead of a ref to make sure that the component
// re-renders when the popover's anchor updates.
Expand Down Expand Up @@ -589,7 +592,19 @@ export default function NavigationLinkEdit( {
return;
}

// If the link ui was opened due to the block being added,
// we need to return focus to the block instead of the appender.
if (
focusBlockOnLinkCloseRef.current &&
linkUIref.current.contains(
window.document.activeElement
)
) {
ref.current.focus();
}

setIsLinkOpen( false );
focusBlockOnLinkCloseRef.current = false;
} }
anchor={ popoverAnchor }
onRemove={ removeLink }
Expand Down

0 comments on commit 9e0ec83

Please sign in to comment.