Spectrum: Topic context menu gets cut out

[FezVrasta]

It can happen that the context menu of the top post of a thread gets cut by the scrollable container where it lives (if the post is very long, or the viewport very narrow)

Now that we have react-popper setup as dependency, we could easily position this context menu using it and avoid the problem.

[gdad-s-river]

I'd like to take this up. Thank you @FezVrasta !

[FezVrasta]

Great! You may find this PR useful: https://github.com/withspectrum/spectrum/pull/2791

[brianlovin]

Also it'd be awesome if we can change the exit behavior to use src/components/outsideClickHandler.js - right now the actionBar.js component sets a transparent div over the whole page to handle closing that dropdown which is a bit janky :)

[brianlovin]

That could be a separate PR, too - jjust somewhat related :)

[gdad-s-river]

Got it! will do that as well.

[fullstackguyhere]

Any leads on this? Did anyone get a chance to resolve this?

[gdad-s-river]

@fullstackguyhere I'm working on it

[gdad-s-river]

@brianlovin, after taking help from Federico to understand what was going wrong when I implemented the same logic that @FezVrasta had in his pull request we've, I think, a couple of options for handling showing / hiding of the flyout. Let me explain what is up —

Because Flyout getting visible on settings icon's hover is handled through css (display: none -> display: inline-block) Popper can't compute the flyout's position because of its initial display: none.

Quoting Federico

The element can't be display: none or Popper.js can't properly compute its position, I think what's happening is that the visibility of the element is changed too late. In my PR the visibility was handled by adding/removing the element from the DOM

Because in Avatar component hover is handled by onmouseenter this problem doesn't occur there because of conditional isHovering. So the two options are —

1. Handle showing and hiding with visibility and opacity
2. Handle this in Javascript using onmouseenter.

Things that I see that need to be taken care of — 

1. On Setting Icon's hover, its tooltip also has to be adjusted and kept in the vertically opposite direction as that of flyout (when popper automatically takes care of its position, up or down the Settings Icon), makes sense that way?

I'd really appreciate some guidance.

[brianlovin]

Maybe Handle this in Javascript using onmouseenter will work best here? In addition to the onClick handler that should take care of any ux issues.

On Setting Icon's hover, its tooltip also has to be adjusted and kept in the vertically opposite direction as that of flyout

Which tooltip?

[gdad-s-river]

Maybe Handle this in Javascript using onmouseenter will work best here? In addition to the onClick handler that should take care of any ux issues.

Okay.

Which tooltip?

[brianlovin]

Ahhh, that tooltip doesn't show up on Firefox so I wasn't seeing it on my end :P

Could you just set the tipPosition to left and avoid the issue entirely?

[gdad-s-river]

Haha okay.

Could you just set the tipPosition to left and avoid the issue entirely?

Yes, I guess! I'll do that. Thanks!

[brianlovin]

This was fixed!