Mention: suggestion panel not handling collision detection

primefaces / primereact

The Most Complete React UI Component Library

https://primereact.org

MIT License

6.25k stars 965 forks source link

Mention: suggestion panel not handling collision detection #4196

Open lagroms opened 1 year ago

lagroms commented 1 year ago

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

melloware commented 1 year ago

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)`;
        };

lagroms commented 1 year ago

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

lagroms commented 8 months ago

@melloware / @thejus557 any news regarding this feature?

melloware commented 8 months ago

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.

jurvi commented 2 months ago

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.

briannezhad commented 2 months ago

Is there a solution for this? I wish there were a additional prop for positioning

melloware commented 2 months ago

no i think the core component would have to be modified.

potatosalad94 commented 1 month ago

@cagataycivici mentioned a new generic positioning back in Feb on the discord. Don't know if it's still planned?