Popover: JS error triggers on autocomplete popovers when used at the end of blocks lines

[youknowriad]

Description

When you type @admin close to the edge of a long paragraph, a popover is supposed to render to show you the matched users, very often a JS error is triggered causing the whole block to collapse.

Step-by-step reproduction instructions

1- Create a block
2- Insert a long paragraph
3- Focus close to the edge of the first row
4- Type @admin
5- Noticed the block collapsing.

Screenshots, screen recording, code snippet

bug-popover.mov

Environment info

Tested on Chrome, not sure if reproducible on others.

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure

[Mamaduka]

At first glance, this might have the same cause as #75896.

[mcsf]

I think I have a fix. Can anyone confirm before I polish it?

diff --git a/packages/rich-text/src/hook/use-anchor.js b/packages/rich-text/src/hook/use-anchor.js
index 2aed74d15ed..1b5f8912385 100644
--- a/packages/rich-text/src/hook/use-anchor.js
+++ b/packages/rich-text/src/hook/use-anchor.js
@@ -87,9 +87,16 @@ function createVirtualAnchorElement( range, editableContentElement ) {
 	return {
 		contextElement: editableContentElement,
 		getBoundingClientRect() {
-			return editableContentElement.contains( range.startContainer )
-				? getRectangleFromRange( range )
-				: editableContentElement.getBoundingClientRect();
+			if ( editableContentElement.contains( range.startContainer ) ) {
+				const rect = getRectangleFromRange( range );
+				if ( rect ) {
+					return rect;
+				}
+				console.log( 'prevented typeerror!' );
+				return editableContentElement.getBoundingClientRect();
+			}
+
+			return editableContentElement.getBoundingClientRect();
 		},
 	};
 }

[youknowriad]

@Mamaduka haha yes, I tried creating the issue with LLMs first and I thought it didn't work, let me close the other one, this one has a potential solution :)

[mcsf]

I think I have a fix. Can anyone confirm before I polish it?

Ah, I see that the aforementioned #75896 has an automated analysis pointing at the same root cause. I guess I feel... err... validated by the machine?

[Mamaduka]

@mcsf, it looks like we missed the null check-in #73853.

PS. Adding tests for the position bug and/or a possible failure on null would be nice, but it's not a blocker.

[mcsf]

PS. Adding tests for the position bug and/or a possible failure on null would be nice, but it's not a blocker.

Can add some tests, but they feel artificial (mock a failure of getRectangleFromRange and test useAnchor's virtual element's getBoundingClientRect), especially given that at the root we have a type error that should be caught statically.

If instead we could set @ts-check and fix all type errors in the file in a follow-up PR, how would you feel?

[Mamaduka]

If instead we could set @ts-check and fix all type errors in the file in a follow-up PR, how would you feel?

Makes sense 👍