Skip to:
Content

BuddyPress.org

Opened 8 months ago

Last modified 4 weeks ago

#9289 new defect (bug)

BP Mentions autosuggest popup positioning bug

Reported by: cjerrells's profile cjerrells Owned by:
Milestone: Awaiting Contributions Priority: low
Severity: normal Version: 14.3.2
Component: Activity Keywords: has-patch
Cc:

Description

Hi! This is my first time reporting an issue, so let me start by saying thank you for the phenomenal work on BuddyPress through the ages :)

I've found two possible bugs in bp-activity/js/mentions.js:

  1. The callback registration for "before reposition" is using the key "before_reposition" but in bp-core/js/vendor/jquery.atwho.js it's actually "beforeReposition". So as far as I can tell in my own testing, this function isn't being called. I believe it changed (7 years ago!) in revision 11795.
  1. Even with that fixed, the code doesn't seem to account for scrollable content boxes, resulting in the autosuggest popup appearing far down the page from where the user is typing if the body#tinymce is taller than its containing iframe.

This is happening for us in bbPress TinyMCE topic/reply boxes, where we're using the approach here to enable @-mention autosuggest in that context.

However, I have tested with vanilla WP/BP and could produce the same behaviour in a BP Nouveau message compose box (screenshot attached).

On our site we have fixed this by:

  1. Changing the key to "beforeReposition" so that the code block runs
  1. Adding the following at line 677 (just after the iframeOffset handling):

caret.top -= jQuery( atwhoDataValue.iframe ).contents().scrollTop();

Attachments (1)

Example of autosuggest positioning bug.jpg (183.4 KB) - added by cjerrells 8 months ago.
Example screenshot

Download all attachments as: .zip

Change History (4)

@cjerrells
8 months ago

Example screenshot

#1 @espellcaste
5 weeks ago

  • Milestone changed from Awaiting Review to Awaiting Contributions

This ticket was mentioned in PR #429 on buddypress/buddypress by @manhphucofficial.


4 weeks ago
#2

  • Keywords has-patch added

### Summary
This PR fixes an issue where the BuddyPress mentions autosuggest dropdown
appears far from the caret when the editor content is scrollable.

### Details
Two issues were addressed:

  • Use the correct at.js callback key (beforeReposition), as the existing before_reposition callback was never executed.
  • When an iframe is used (eg TinyMCE), adjust the caret position by accounting for the iframe document scroll offset so the popup tracks the caret correctly.

### How to test

  1. Go to a mentions-enabled editor (eg Messages → Compose).
  2. Add enough content so the editor area scrolls.
  3. Scroll down inside the editor and type @de.
  4. Confirm the suggestions dropdown appears next to the caret, not offset further down the page.

Fixes #9289

#3 @manhphucofficial
4 weeks ago

Hi everyone

I’ve opened a PR that addresses this issue here:
https://github.com/buddypress/buddypress/pull/429

The change fixes the At.js callback key (beforeReposition) so it actually runs, and adjusts the caret position when the editor iframe is scrollable, which keeps the mentions popup aligned with the caret.

I’ve tested this in a vanilla BuddyPress install (Messages → Compose) and confirmed the dropdown now appears in the correct position while scrolling.

Happy to tweak anything if needed — thanks for taking a look!

Note: See TracTickets for help on using tickets.