PopupBehavior

PopupBehavior provides reusable popup positioning relative to an anchor element. It's currently used by SelectComponent, where the Select control is the anchor and the options list is the popup. The Behavior doesn't decide when a Component should be considered open or closed. It only handles showing, hiding and positioning the popup.

Usage

PopupBehavior expects two options:

• anchor— the DOM element the popup is positioned relative to
• popup— the DOM element that should be shown and positioned

For example:

import PopupBehavior from "/src/behaviors/popup_behavior.js";

this.behaviors.add(PopupBehavior, {
    anchor: this.part("control"),
    popup:  this.options_el
});

Its default Behavior name is "popup"

this.behaviors.get("popup").open();
this.behaviors.get("popup").close();

open() shows the popup and recalculates its position. close() hides it.

Positioning

When the popup opens, PopupBehavior measures the available viewport space around the anchor and chooses a suitable vertical direction and horizontal alignment. It adds one vertical class:

popup-above
popup-below

and one horizontal alignment class:

popup-align-left
popup-align-right

The classes are added to both the anchor and the popup. This allows both elements to react to the chosen position. The Behavior also exposes the available vertical space through:

--popup-available-height

CSS is required

PopupBehavior chooses the positioning classes, but CSS is responsible for actually placing and styling the popup.

For example:

.popup                   { position: absolute; max-height: var(--popup-available-height); }
.popup.popup-below       { top: 100%; }
.popup.popup-above       { bottom: 100%; }
.popup.popup-align-left  { left: 0; right: auto; }
.popup.popup-align-right { left: auto; right: 0; }

The exact CSS will depend on the Component's DOM structure and design. For example, SelectComponent also uses the positioning classes on its control to adjust borders and border radii so the control and options popup visually join together.

Component responsibilities

The Component using PopupBehavior remains responsible for its own semantics and presentation, including things such as:

• deciding when to call open() and close()
• Component flags and CSS classes
• ARIA attributes
• outside-click handling
• popup contents and styling

PopupBehavior only provides the reusable popup mechanics.