Extra span in portal triggering flex issues.

[kentcdodds]

🐛 Bug report

Current Behavior

I've got a menu button inside a flex container. This extra span is causing me grief (layout shift):

menu-button.mov

Here's what it looks like before hydration:

Here it is after hydration:

Expected behavior

Wrapping the button in a flex container makes the sibling span trigger a content shift.

Reproducible example

https://stackblitz.com/edit/node-qppzt9?file=app%2Froot.tsx

Suggested solution(s)

Maybe don't render anything on the server render?

A workaround (that I'm implementing) is to wrap the <Menu> inside a <div> so the sibling span doesn't end up messing up the flex flow. But this was surprising.

Additional context

This seems to only be a problem when server rendering.

Your environment

Software	Name(s)	Version
Reach Package	@reach/portal and @reach/menu	latest
React	dom	17
Browser	any	any
Assistive tech
Node
npm/yarn
Operating System

[artursvonda]

Similar issue but causes warnings when rendered in context where span is not suited (like tbody).

[chaance]

I'm thinking we should add a prop to Portal that skips mounting before hydration. That's probably the right default for menu button and listbox since neither of these dropdowns need to be rendered on the server anyway.

[chaance]

Fixed in v0.17.0

[kentcdodds]

Thanks!