plate icon indicating copy to clipboard operation
plate copied to clipboard

Published 20 hours ago • verified publisher icon udecode

Firefox arrow keys skipping list with mention or void element

Open dylans opened this issue 3 years ago • 1 comments

Description

In Firefox, if you have a list with a mention element that is wider than any list item, up and down arrow keys skip that list item.

If you add at least one list item that is wider than the mention element, then up/down does not skip that list item.

It's possible this behavior isn't limited to lists. Confirmed if you have just a mention as a paragraph that it gets skipped when pressing up down.

Steps

https://user-images.githubusercontent.com/97291/190255584-2c178692-c3da-42b3-9b2a-1459cfe42275.mp4

Environment

  • slate:any recent version
  • slate-react: any recent version
  • browser: Firefox
  • plate: broken back to at least 14.0.0

Funding

  • You can sponsor this specific effort via a Polar.sh pledge below
  • We receive the pledge once the issue is completed & verified
Fund with Polar

dylans avatar Sep 14 '22 20:09 dylans

The cause appears to be the use of display: inline-block on a contentEditable=false element in Firefox. If you remove that from the CSS, behavior is mostly normal in Firefox and doesn't seem to break Chrome or Safari.

dylans avatar Sep 15 '22 13:09 dylans