Represents a DropDown component.

target - Renders the dropdown's target element.

  • Renders the dropdown list items.

base - The dropdown list wrapper container.

list - The dropdown list element.

Callable

  • Returns ReactNode

Accessors

Returns the group items of the dropdown.

Returns the items of the dropdown.

selectedItem: IgrDropdownItem

Returns the selected item from the dropdown or null.

Events

onChange: (args: CustomEvent<IgrDropdownItem>) => void

Emitted when the selected item changes.

Type declaration

onClosed: (args: CustomEvent<void>) => void

Emitted after closing the dropdown.

Type declaration

onClosing: (args: CustomEvent<void>) => void

Emitter just before the dropdown is closed.

Type declaration

onOpened: (args: CustomEvent<void>) => void

Emitted after the dropdown is open.

Type declaration

onOpening: (args: CustomEvent<void>) => void

Emitted just before the dropdown is open.

Type declaration

Methods

  • Clears the current selection of the dropdown.

    Returns void

  • Invoked when the component is removed from the document's DOM.

    This callback is the main signal to the element that it may no longer be used. disconnectedCallback() should ensure that nothing is holding a reference to the element (such as event listeners added to nodes external to the element), so that it is free to be garbage collected.

    disconnectedCallback() {
    super.disconnectedCallback();
    window.removeEventListener('keydown', this._handleKeydown);
    }

    An element may be re-connected after being disconnected.

    Returns void

  • Navigates to the item with the specified value. If it exists, returns the found item, otherwise - null.

    Parameters

    • value: string

    Returns IgrDropdownItem

  • Navigates to the item at the specified index. If it exists, returns the found item, otherwise - null.

    Parameters

    • index: number

    Returns IgrDropdownItem

  • Selects the item with the specified value. If it exists, returns the found item, otherwise - null.

    Parameters

    • value: string

    Returns IgrDropdownItem

  • Selects the item at the specified index. If it exists, returns the found item, otherwise - null.

    Parameters

    • index: number

    Returns IgrDropdownItem

  • Shows the component.

    Parameters

    • target: string | HTMLElement

    Returns Promise<boolean>

  • Toggles the open state of the component.

    Parameters

    • target: string | HTMLElement

    Returns Promise<boolean>

Properties

distance: number

The distance from the target element.

flip: boolean

Whether the component should be flipped to the opposite side of the target once it's about to overflow the visible area. When true, once enough space is detected on its preferred side, it will flip back.

placement: PopoverPlacement

The preferred placement of the component around the target element.

sameWidth: boolean

Whether the dropdown's width should be the same as the target's one.

scrollStrategy: PopoverScrollStrategy

Determines the behavior of the component during scrolling of the parent container.

lifecycle

  • Invoked when the component is removed from the document's DOM.

    This callback is the main signal to the element that it may no longer be used. disconnectedCallback() should ensure that nothing is holding a reference to the element (such as event listeners added to nodes external to the element), so that it is free to be garbage collected.

    disconnectedCallback() {
    super.disconnectedCallback();
    window.removeEventListener('keydown', this._handleKeydown);
    }

    An element may be re-connected after being disconnected.

    Returns void