primereact Mention: suggestion panel not handling collision detection

Describe the bug

The suggestion panel won't be totally visible when opened close to a window edge. I've also tried to play with the panelStyle prop, but it doesn't seem to work ?

Screenshot 2023-03-29 at 1 22 16 PM

Screenshot 2023-03-30 at 12 56 55 PM

Reproducer

No response

PrimeReact version

9.2.1

React version

17.x

Language

ES6

Build / Runtime

Create React App (CRA)

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

Have the suggestion panel to relocate automatically.

Floating UI library has that kind of feature: https://floating-ui.com/docs/autoPlacement
Another possibility would be rendering the suggestion panel above the caret. The react-mentions library has a forceSuggestionsAboveCursor prop: https://github.com/signavio/react-mentions

Mar 29 '23 05:03 lagroms

Confirmed this popup is not doing collision detection like AutoComplete and other components are doing its always placing it in the same spot.

        const alignOverlay = () => {
            const { key, index } = triggerState;
            const value = inputRef.current.value;
            const position = DomHandler.getCursorOffset(inputRef.current, value.substring(0, index - 1), value.substring(index), key);

            overlayRef.current.style.transformOrigin = 'top';
            overlayRef.current.style.left = `calc(${position.left}px + 1rem)`;
            overlayRef.current.style.top = `calc(${position.top}px + 1.2rem)`;
        };

Apr 01 '23 13:04 melloware

@melloware Any news for this feature ? This bug is blocking for me to implement it in my project. Thanks !

May 18 '23 10:05 lagroms

@melloware / @thejus557 any news regarding this feature?

Nov 14 '23 11:11 lagroms

I have not investigated it further only confirmed that it was an issue.

IF you need this urgently I suggest you look into PRO support to financially sponsor this fix.

Nov 14 '23 12:11 melloware

Yeah this is definitely an issue, just bumped into this as well. When the Mention component is in a sidepanel opened from right side of the screen, the suggestion panel often pushes the whole viewport to right causing a horizontal scrollbar.