CSS display issues in both Firefox and Chrome with v1.0.5

[ofadam]

Describe the bug

After upgrading the "Insert Special Characters" plugin from v1.0.4 to v1.0.5, clicking on the special character icon in the formatting toolbar now shows a horizontal scroll bar in Firefox where one didn't initially appear. Additionally, searching for a character name now gets messy in both Firefox and Chrome.

Steps to Reproduce

1. Open new story in WordPress
2. Click on Insert Special Characters plugin icon in toolbar
3. Search for name of character

Screenshots, screen recording, code snippet

Here's what I see when initially loading the Insert Special Characters plugin using Firefox 108 – a horizontal scroll bar is appearing unnecessarily:

But here's what I see when initially loading the Insert Special Characters plugin using Chrome 108 – no horizontal scroll bar appears, which looks better:

For reference, here's what appeared when loading v1.0.4 of the plugin with Firefox 108 – no horizontal scroll bar as expected:

Searching for a character name in either the latest version of Firefox or Chrome results in this messy view:

Environment information

OS: MacOS 12.6.1
Browser: Firefox 108 and Chrome 108

WordPress information

WordPress 6.1.1

Code of Conduct

• I agree to follow this project's Code of Conduct

[jeffpaul]

@ofadam is this still occurring for you on v1.0.6?

[ofadam]

Unfortunately so.

[jayedul]

I couldn't reproduce this issue. Both WordPress and Browsers released updates recently. Maybe fixed meanwhile?

[ofadam]

I'm still seeing the original issue on both Firefox 112 and Chrome 113.

[bjorn2404]

I was able to replicate the horizontal scrollbar appearing in Firefox but not the grid formatting issue. @ofadam What other plugins are installed on the site? Especially interested in tracking down what is adding the blue plus icon in the formatting bar from your screenshot above. Thanks

[ofadam]

I have very few plugins installed, but do have one called Multicollab enabled – it creates that blue plus icon in the formatting toolbar.

https://wordpress.org/plugins/commenting-feature/

[bjorn2404]

@ofadam I'm able to replicate after installing and activating the Multicollab plugin. If I deactivate, the grid formatting problem goes away. Is it possible for you to confirm on your end?

Example with Multicollab activated:

Without Multicollab activated:

[jeffpaul]

@poojabhimani12 we're seeing potential compatibility issues between Multicollab and Insert Special Characters... any chance you can share what from Multicollab might be causing this so we can determine how best to ensure both plugins function properly together?

[ofadam]

I've also emailed Multidots (creator of Multicollab) to see if they can assist.

[poojabhimani12]

@jeffpaul & @ofadam ,

You can find fixes from the above git commit. Please check and let us know.

[ofadam]

@poojabhimani12 That did seem to fix the issue with the grid not displaying correctly – thanks!

@jeffpaul @bjorn2404 I'm still seeing the grid sneaking off screen even when trying to add a special character toward the right of a text block:

Since the grid doesn't re-flow according to screen size, that makes it more challenging to ensure it properly fits.

[bmarshall511]

Spent quite a bit of time digging into this & have it narrowed down, but haven't found a solution for it yet. You can replicate the issue by using your cursor to select text. If no text is selected, the Popover positions itself correctly. Happens both in Chrome (114.0.5735.90) & FF (114.0)

Looking at anchorRect when working and no text is selected, it provides the correct coordinates:

DOMRect { x: 488.0333251953125, y: 332.1166687011719, width: 0, height: 22, top: 332.1166687011719, right: 488.0333251953125, bottom: 354.1166687011719, left: 488.0333251953125 }

But when text is selected, you always get:

DOMRect { x: 0, y: 0, width: 0, height: 0, top: 0, right: 0, bottom: 0, left: 0 }

causing the positioning to be off.

It seems like the onToggle function that sets the var anchorRange is working as expected, but when the component re-renders to display the Popover, it's set to something different:

onToggle result of anchorRange:

Range { commonAncestorContainer: #text, startContainer: #text, startOffset: 55, endContainer: #text, endOffset: 56, collapsed: false }

After component re-renders anchorRange:

Range { commonAncestorContainer: p#block-29ccd025-90a2-4b92-af05-54610e2bfeeb.block-editor-rich-text__editable.block-editor-block-list__block.wp-block.is-selected.wp-block-paragraph.rich-text, startContainer: p#block-29ccd025-90a2-4b92-af05-54610e2bfeeb.block-editor-rich-text__editable.block-editor-block-list__block.wp-block.is-selected.wp-block-paragraph.rich-text, startOffset: 0, endContainer: p#block-29ccd025-90a2-4b92-af05-54610e2bfeeb.block-editor-rich-text__editable.block-editor-block-list__block.wp-block.is-selected.wp-block-paragraph.rich-text, endOffset: 0, collapsed: true }

Furthermore, looks like the Popover prop getAnchorRect has been deprecated as of 6.1 (https://make.wordpress.org/core/2022/10/10/editor-components-updates-for-wordpress-6-1/) in place of anchor.

Still digging into it ⛏️, but hopefully this helps others replicate & narrow down where to look.

[bjorn2404]

I was also going to note that you can get rid of the horizontal scrollbar in Firefox by adding a scrollbar-gutter: stable CSS rule to .components-popover__content but that can leave a gap on the right of the popover if there is no vertical scroll (less icons appearing), which might not be ideal.

[bmarshall511]

@ofadam @jeffpaul Think I got it, that was a doozy! You can find the fix in the commit above.