plate icon indicating copy to clipboard operation
plate copied to clipboard

'floating toolbar' overlaps with native default 'context menu' in Mobile

Open electroluxcode opened this issue 4 months ago • 1 comments

Description

'floating toolbar' overlaps with native default 'context menu' in Mobile , like this pic

Image

I can't find a way to listen to the position or other properties of the native toolbar Maybe we can consider it

  1. Ensure that your own toolbar is located below the editable area (it seems that 'notion' does this)
  2. Disable native toolbar

ref:

  1. https://stackoverflow.com/questions/22693315/contenteditable-on-ios-control-prevent-selection-toolbar
  2. https://stackoverflow.com/questions/16039219/disable-selection-context-menu-in-ios-safari?rq=3
  3. https://stackoverflow.com/questions/12304012/preventing-default-context-menu-on-longpress-longclick-in-mobile-safari-ipad
  4. https://stackoverflow.com/questions/71916923/open-safari-context-menu-below-text-selection

Reproduction URL

No response

Reproduction steps

1. go to `https://platejs.org/` in mobile
2. selection some area

electroluxcode avatar Sep 10 '25 12:09 electroluxcode

This overlap happens because mobile browsers show a native context menu on text selection, and web apps can't control its position or visibility. Plate's floating toolbar is rendered as an overlay after the editable area, so it can easily stack on top of or under the native menu, especially on iOS/Safari. There's no built-in way in Plate to detect, reposition, or disable the native context menu on mobile—browser APIs just don't allow it docs.

If this is a problem for your users, the best workaround is to use a fixed toolbar (rendered above the editor) instead of a floating one on mobile. You can do this by switching to the FixedToolbarKit, which always stays at the top and avoids overlap with the native menu docs.

Customizing the floating toolbar itself won't solve the overlap, since the native menu is out of your control. Disabling the native menu entirely is not officially supported and can break accessibility and expected behavior for users.

To reply, just mention @dosu.


How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other  Chat with Dosu Join Discord Share on X

dosubot[bot] avatar Sep 10 '25 12:09 dosubot[bot]