Rich Text: Only apply focus to elements not selection (#58745)

* Rich Text: Only apply focus to elements not selection * Add regression test * increase the delay so the tests pass * Capital P dangit --------- Co-authored-by: Jerry Jones <[email protected]> Co-authored-by: scruffian <[email protected]> Co-authored-by: jeryj <[email protected]> Co-authored-by: getdave <[email protected]>
WordPress · Feb 9, 2024 · 45a49c9 · 45a49c9
1 parent d89ab60
commit 45a49c9
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 1 deletion.
diff --git a/packages/rich-text/src/component/use-input-and-selection.js b/packages/rich-text/src/component/use-input-and-selection.js
@@ -241,7 +241,7 @@ export function useInputAndSelection( props ) {
 					activeFormats: EMPTY_ACTIVE_FORMATS,
 				};
 			} else {
-				applyRecord( record.current );
+				applyRecord( record.current, { domOnly: true } );
 			}
 
 			onSelectionChange( record.current.start, record.current.end );

diff --git a/test/e2e/specs/editor/blocks/links.spec.js b/test/e2e/specs/editor/blocks/links.spec.js
@@ -878,6 +878,48 @@ test.describe( 'Links', () => {
 		] );
 	} );
 
+	// Fix for https://github.com/WordPress/gutenberg/issues/58322
+	test( 'can click links within the same paragraph to open the correct link preview (@firefox)', async ( {
+		editor,
+		LinkUtils,
+	} ) => {
+		// Create a paragraph with two links
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: {
+				content: `<a href="https://wordpressfoundation.org/donate/">Donate to the WordPress Foundation</a> to support <a href="https://wordpress.org/gutenberg">Gutenberg</a>`,
+			},
+		} );
+
+		// Click on "Gutenberg" link in the canvas
+		await editor.canvas
+			.getByRole( 'link', {
+				name: 'Gutenberg',
+			} )
+			.click();
+
+		const linkPopover = LinkUtils.getLinkPopover();
+		await expect( linkPopover ).toBeVisible();
+		await expect(
+			linkPopover.getByText( 'wordpress.org/gutenberg' )
+		).toBeVisible();
+
+		// Click the other link in the same paragraph. We need a short delay between mousdown and mouseup to get the popover to show
+		await editor.canvas
+			.getByRole( 'link', {
+				name: 'WordPress',
+			} )
+			.click( { delay: 100 } );
+
+		await expect( linkPopover ).toBeVisible();
+		await expect(
+			linkPopover.getByText( 'wordpress.org/gutenberg' )
+		).toBeHidden();
+		await expect(
+			linkPopover.getByText( 'wordpressfoundation.org/donate/' )
+		).toBeVisible();
+	} );
+
 	test.describe( 'Editing link text', () => {
 		test( 'should allow for modification of link text via the Link UI', async ( {
 			page,