Popover: by default have appendTo={document.body}

[bentleyvk]

We are getting complains from time to time that Select or other dynamically placed component is not visible or is behind something. Maybe instead of rendering Popover or DropdownMenu as a sibling we should render it in the body by having appendTo={el.ownerDocument.body} as a default prop.
Regarding accessibility, it should be ok as long as we focus inside poped component on its opening.

[mayank99]

Yes, agree. And for accessing ownerDocument, we might have to clone the children to add a callback ref.

[mayank99]

@bentleyvk @veekeys Could you list the reasons we might not want to make this change in v1? I don't think it necessarily counts as a breaking change if only unit tests fail.

[bentleyvk]

It can really break users' stuff if they are depending on z-index, e.g. turns out in iTwin.js all layout is based on z-indexes therefore appendTo={document.body} doesn't work for them as tippy has too low z-index (but it can be changed).

[mayank99]

Our popover components should kinda always be on the top, so we could simply increase the tippy z-index to be higher than all the z-indices in imodeljs. Here's the file where they are doing their fancy z-index management: https://github.com/iTwin/itwinjs-core/blob/master/ui/core-react/src/core-react/_z-index.scss

They are using 1000 increments for each layer, so we could pick a much higher value (99999) which should be a safe bet even if they add more layers.

[mayank99]

This is now released in 1.32.0 🎉