Opened 8 months ago
Last modified 4 weeks ago
#9289 new defect (bug)
BP Mentions autosuggest popup positioning bug
| Reported by: |
|
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:
- 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.
- 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:
- Changing the key to "beforeReposition" so that the code block runs
- Adding the following at line 677 (just after the iframeOffset handling):
caret.top -= jQuery( atwhoDataValue.iframe ).contents().scrollTop();
Attachments (1)
Change History (4)
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 existingbefore_repositioncallback 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
- Go to a mentions-enabled editor (eg Messages → Compose).
- Add enough content so the editor area scrolls.
- Scroll down inside the editor and type
@de. - Confirm the suggestions dropdown appears next to the caret, not offset further down the page.
Fixes #9289
#3
@
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!
Example screenshot