RichText toolbar appears on top of page

[semopz]

Category

[ ] Enhancement

[x] Bug

[ ] Question

Version

Please specify what version of the library you are using: [1.13.0-beta]

Expected / Desired Behavior / Question

The floating toolbar should appear next to the RichText control. Ideally, the user should be able to hide or move the toolbar out of the way, but it should appear as close to the control as possible or at least in the viewport.

Also, if there are multiple RichText controls, the toolbar should appear next to the control that has the focus/cursor.

I think it is reasonable to require that only one RichText control is in edit mode at any given time to make the toolbar 'stick' to the input. Ideally, with multiple controls, the toolbar should move to there the focus is.

Observed Behavior

The toolbar appears at the top of the page regardless of where the RichText control is placed. Scrolling up to the top may be required is the RichText control is too far down the page.

Steps to Reproduce

Just place enough divs above the RichText control to push it down to the bottom of the page.

[joeljeffery]

I could reproduce the problem. If you wrap the RichText in a

with relative positioning, the bug seems to go away.

<div style={{ position: relative }}><RichText ... /></div>

[giveitaGo]

Thank you @joeljeffery you saved me the effort of debugging this.

[Zerg00s]

Thank you, @joeljeffery , wrapping RichText with <div style={{ position: 'relative' }}>...</div> fixed the issue for me