Floating toolbar incorrectly positioned

[jeremieamstutz]

Description

Hello,

I installed the default floating toolbar kit, but it doesn't show up at all.

I inspected a little and it seems to appear but at the default position of -9999px instead of the correct position.

I don't why exactly this happens. I guess the reference of the selection is not visible

You're help is greatly appreciated :)

Plate version

49.0.0

Browsers

Chrome

[dosubot[bot]]

Hi @jeremieamstutz! I'm Dosu and I’m helping the plate team.

The floating toolbar shows up at -9999px when Plate can't find a valid text selection to anchor it. This usually happens if the selection is collapsed, missing, or not mapped to a DOM range. The toolbar only appears when you have an expanded (highlighted) selection with text, the editor is focused, and no overlays (like link or AI chat popups) are open. If any of these conditions aren't met, the toolbar is hidden or positioned off-screen by design (source, more).

To fix this, make sure:

• You have actual text selected in the editor (not just a cursor).
• The editor is focused and not in read-only mode (unless you set showWhenReadOnly).
• No other floating plugins (like link or AI chat) are open, as they can hide the toolbar.
• Your editor and toolbar are set up using the recommended Plate kits and context.

If you still see the issue, double-check your editor setup and make sure the selection is being tracked correctly. This behavior is by design to avoid showing the toolbar when it can't be positioned reliably.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}   

[felixfeng33]

Can you try others like render.aboveSlate instead of render.afterEditable in floating-toolbar-classic-kit.tsx?
Let me know if it not solved your problem.

[lsherman98]

I am having the same issue. The editor is focused, there is text selected, etc, and the toolbar is displaying in the top left corner of the container.

Attached is what the toolbar state is. Not sure if related but i also keep getting these errors:

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Check the render method of Primitive.button.SlotClone.
at ToolbarButton (http://localhost:5173/src/components/ui/toolbar.tsx:110:67)

and

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Check the render method of FloatingToolbar.
at Toolbar (http://localhost:5173/src/components/ui/toolbar.tsx:31:27)
at div
at

[zbeyens]

We're using React 19, so you'll need to use React.forwardRef on the concerned components. We'd love to support both React 18 and 19 but it's not worth the maintenance.

[jeremieamstutz]

I'm using React 19 and I checked all the points from the bot.

My project is very new so I shouldn't have any side effects.

Changing the render to aboveSlate made the editor disappear completely.

[lsherman98]

Upgrading to react 19 fixed the issue for me.

[zbeyens]

@jeremieamstutz Could you reproduce it from https://github.com/udecode/plate-template ?

[jeremieamstutz]

So, I

• create a brand new next app
• installed the basic editor with the cli
• added the floating toolbar with the cli
• created a floating toolbar kit
• added the kit to the editor.

Still the same issue :(

[jeremieamstutz]

It seems that there is an issue with the ref