Dropdown extends Floater

Assign a floater panel to a MouseEvent

Example

JS
new Dropdown({
    content: createElement({
        class: 'bg-white pad',
        content: 'Hello World'
    }),
    anchor: '#hi-button'
})
HTML
<komp-dropdown anchor="#hi-button">
    Hello World
</komp-dropdown>

Constructor

new Dropdown(options)
options : Object optional
mouseevent : string optional

MouseEvent that toggles floater

removeOnBlur : boolean optional

Hide dropdown when user clicks outside or focuses elsewhere

timeout : number optional

Milliseconds to wait before hiding dropdown after mouseleave

anchor : HTMLElement

element to anchor positioning to

container : string | HTMLElement optional

element to append floater to. If String, then used as selector for this.closest(selector)

placement : string optional

how the floater is anchored, e.g. "top", "top-start", "top-end", "left", "left-start"...

strategy : string optional

how the floater is positioned in the document. "absolute" or "fixed"

flip : boolean | Object optional

See https://floating-ui.com/docs/flip, defaults to false in favor of autoPlacement

offset : boolean | Object optional

See https://floating-ui.com/docs/offset

shift : boolean | Object optional

See https://floating-ui.com/docs/shift

arrow : boolean | number optional

True to show default size, or number in pixels

size : boolean | Object optional

See https://floating-ui.com/docs/size

autoPlacement : boolean | Object optional

See https://floating-ui.com/docs/autoPlacement

inline : boolean | Object optional

See https://floating-ui.com/docs/inline

autoUpdate : boolean | Object optional

See https://floating-ui.com/docs/autoUpdate#options

onShow : function optional

event listener for show (cancellable, fires before showing)

onShown : function optional

event listener for shown (fires after showing)

onHide : function optional

event listener for hide (cancellable, fires before hiding)

onHidden : function optional

event listener for hidden (fires after hiding)

scope : string optional

showing a floater will hide all other floaters of same scope

content : string | HTMLElement | Array | Object optional

content to append to element. Passed to Dolla's content

Instance Methods

F   anchorChanged()

Reassigning anchor on a floater that's already showing repositions it to the new anchor — the autoUpdate loop follows along.

F   bindAutoUpdate()

Bind floating-ui's autoUpdate loop to the current anchor, tearing down any loop bound to a previous one. Called on connect and whenever anchor changes while connected.

F   hide(eventOptions) → Dropdown

Hide the dropdown and remove -active class from the anchor

Parameters

eventOptions : Object optional

CustomEvent options passed to the hide/hidden events

Returns

Dropdown

this

F   setContent(value) → Floater

Replace the floater's content, keeping the arrow locator that the arrow middleware holds a reference to. Use this rather than dolla's content(), which replaces every child and would orphan the locator.

Parameters

value : string | HTMLElement | Array | Object

passed to Dolla's content

Returns

Floater

this

F   show(eventOptions) → Dropdown

Show the dropdown and add -active class to the anchor

Parameters

eventOptions : Object optional

CustomEvent options passed to the show/shown events

Returns

Dropdown

this

F   toggle(shouldHide, eventOptions) → Floater

Toggle the floater visibility

Parameters

shouldHide : boolean optional

explicitly show or hide. If omitted, toggles based on current visibility.

eventOptions : Object optional

CustomEvent options passed to the resulting show/hide events

Returns

Floater

this

Events

E   hidden

Fired after the floater is hidden. See Floater#hide for detail.sourceEvent.

E   hide

Fired before the floater is hidden (cancellable). When the floater is dismissed in response to user input (Escape, outside click, mouseleave), event.detail.sourceEvent is the originating event.

E   show

Fired before the floater is shown (cancellable). When the floater is shown in response to user input, event.detail.sourceEvent is the originating event.

E   shown

Fired after the floater is shown. See Floater#show for detail.sourceEvent.