External link component: Add a check for on page anchor links (#42259)

* Add a check for on page anchor links * Update index.tsx * Update CHANGELOG.md
WordPress · Aug 2, 2022 · d0bbcf6 · d0bbcf6
1 parent 56bd25a
commit d0bbcf6
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 0 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -4,6 +4,7 @@
 
 ### Bug Fix
 
+-   `ExternalLink`: Check if the link is an internal anchor link and prevent anchor links from being opened. ([#42259](https://github.com/WordPress/gutenberg/pull/42259)).
 -   `BorderControl`: Ensure box-sizing is reset for the control ([#42754](https://github.com/WordPress/gutenberg/pull/42754)).
 -   `InputControl`: Fix acceptance of falsy values in controlled updates ([#42484](https://github.com/WordPress/gutenberg/pull/42484/)).
 -   `Tooltip (Experimental)`, `CustomSelectControl`, `TimePicker`: Add missing font-size styles which were necessary in non-WordPress contexts ([#42844](https://github.com/WordPress/gutenberg/pull/42844/)).

diff --git a/packages/components/src/external-link/index.tsx b/packages/components/src/external-link/index.tsx
@@ -38,12 +38,22 @@ function UnforwardedExternalLink(
 		),
 	].join( ' ' );
 	const classes = classnames( 'components-external-link', className );
+	/* Anchor links are percieved as external links.
+	This constant helps check for on page anchor links,
+	to prevent them from being opened in the editor. */
+	const isInternalAnchor = !! href?.startsWith( '#' );
+
 	return (
 		/* eslint-disable react/jsx-no-target-blank */
 		<a
 			{ ...additionalProps }
 			className={ classes }
 			href={ href }
+			onClick={
+				isInternalAnchor
+					? ( event ) => event.preventDefault()
+					: undefined
+			}
 			target="_blank"
 			rel={ optimizedRel }
 			ref={ ref }