fix(selector-dropdown): add dynamic positioning to the dropdown overlay

[ivanthai]

Updates

• Added explanation of the design decision of adding the isPopperEnabled prop to preserve the former SelectorDropdown behavior
• Added forwardRef to SearchForm because it is used as a child to PopperComponent to SelectorDropdown

Overview

SelectorDropdown is not responsive in terms of the dropdown positioning. i.e. when the dropdown doesn't have enough space between the triggering element and the bottom viewport, it doesn't render above the triggering element instead. This change was needed because there is at least one element that doesn't render well in small viewports

Solution

Utilize react-popper to handle the rendering of the overlay. This required adding forwardRefs to the respective children components. forwardRef and flow don't get along together well so a few

To allow backward compatibility with other components that do not want to use react-popper which would change the overlay to use use absolute positioning, isPopperEnabled was added. This way, components like TemplateDropdown can remain compatible with SelectorDropdown. TemplateDropdown embeds a PopperComponent within a Flyout which would essentially be embedding an absolute within an absolute without a defined height.

An alternative to adding the isPopperEnabled prop is to have TemplateDropdown override the behavior using CSS which was a bit simplier, but more hacky

// TemplateDropdown.scss
.metadata-instance-editor-template-dropdown-menu {
    .overlay-wrapper {
        // override react-popper
        position: relative ! important;
        transform: none ! important;
...

Demo

Issue - dropdown renders below the viewport

Fix - dropdown renders above the triggering element when there is no space

Smallest supported viewport

[tjuanitas]

left a question but looks good to me!

[tjuanitas]

fyi I think some of the changes got reverted back in the last push

[JChan106]

lgtm