🐛 Bug - InViewport misbehaving

Forma 36 bug report

Summary

This bug occurs within the rich-text field editor from field-editors.

If you type a forward slash (/) within the rich text field editor a context pop-up menu comes up that allows for a certain set of actions.

If you’re on a small resolution or you have resized your browser window to be small and this context menu overflows, there’s constant flickering and jumping back and forth of this menu which makes it unusable.

Environment

Latest Chrome, latest OSx

Steps to reproduce

To reproduce this bug:

• Visit this link: https://github.com/contentful/field-editors/tree/master/packages/rich-text
• Resize your browser window to be very small
• Scroll down to the rich field text editor
• Type a /
• Observe the context menu that pops up

Expected results

I expected the pop-up context menu to stay stable so that I can use it.

Actual results

The pop-up context menu constantly jumps around.

[m10l]

The RichText editor is still using our undocumented InViewport F36 component. In F36 we no longer use this component and instead use popper.js.

So there are two things needed - update the RichText editor to use popper.js (so not for this repo), and, then finally remove InViewport.

I’ll work on updating the RichText editor and once a PR is open I’ll link this issue.

[suevalov]

Hi,

InViewport component got removed in version 4.

If you need to use InViewport for any situation, we recommend checking out a react hook that allows using the IntersectionObserver declaratively in your React app to find out if an element is in a given viewport.