Represents a Dropdown component.
Element
igc-dropdown
Slots
target — Renders the dropdown's target element.
default — Renders the dropdown list items.
CSS Parts
base — The dropdown list wrapper container.
list — The dropdown list element.

Properties

Section titled "Properties"

distance

Section titled "distance"

The distance from the target element.

 
distance: number = 0

Defined in src/components/dropdown/dropdown.ts:178

flip

Section titled "flip"

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.

 
flip: boolean = false

Defined in src/components/dropdown/dropdown.ts:171

keepOpenOnOutsideClick

Section titled "keepOpenOnOutsideClick"

Inherited from: EventEmitterMixin< IgcDropdownComponentEventMap, AbstractConstructor<IgcComboBoxBaseLikeComponent> >(IgcComboBoxBaseLikeComponent)

Whether the component dropdown should be kept open on clicking outside of it.

 
keepOpenOnOutsideClick: boolean = false

Defined in src/internals/mixins/combo-box.ts:84

keepOpenOnSelect

Section titled "keepOpenOnSelect"

Inherited from: EventEmitterMixin< IgcDropdownComponentEventMap, AbstractConstructor<IgcComboBoxBaseLikeComponent> >(IgcComboBoxBaseLikeComponent)

Whether the component dropdown should be kept open on selection.

 
keepOpenOnSelect: boolean = false

Defined in src/internals/mixins/combo-box.ts:72

open

Section titled "open"

Inherited from: EventEmitterMixin< IgcDropdownComponentEventMap, AbstractConstructor<IgcComboBoxBaseLikeComponent> >(IgcComboBoxBaseLikeComponent)

Sets the open state of the component.

 
open: boolean = false

Defined in src/internals/mixins/combo-box.ts:33

placement

Section titled "placement"

The preferred placement of the component around the target element.

 
placement: PopoverPlacement = 'bottom-start'

Defined in src/components/dropdown/dropdown.ts:156

sameWidth

Section titled "sameWidth"

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

 
sameWidth: boolean = false

Defined in src/components/dropdown/dropdown.ts:185

scrollStrategy

Section titled "scrollStrategy"

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

 
scrollStrategy: PopoverScrollStrategy = 'scroll'

Defined in src/components/dropdown/dropdown.ts:163

tagName

Section titled "tagName"

The tagName read-only property of the Element interface returns the tag name of the element on which it's called.

MDN Reference

 
tagName: "igc-dropdown" = 'igc-dropdown'

Defined in src/components/dropdown/dropdown.ts:86

Accessors

Section titled "Accessors"

groups

Section titled "groups"

Returns the group items of the dropdown.

 
get groups(): IgcDropdownGroupComponent[]

Defined in src/components/dropdown/dropdown.ts:195

Returns IgcDropdownGroupComponent[]

items

Section titled "items"

Returns the items of the dropdown.

 
get items(): IgcDropdownItemComponent[]

Defined in src/components/dropdown/dropdown.ts:188

Returns IgcDropdownItemComponent[]

selectedItem

Section titled "selectedItem"

Returns the selected item from the dropdown or null.

 
get selectedItem(): IgcDropdownItemComponent | null

Defined in src/components/dropdown/dropdown.ts:205

Returns IgcDropdownItemComponent | null

Methods

Section titled "Methods"

clearSelection

Section titled "clearSelection"

Clears the current selection of the dropdown.

 
clearSelection(): void

Defined in src/components/dropdown/dropdown.ts:599

Returns void

connectedCallback

Section titled "connectedCallback" 
connectedCallback(): void

Defined in src/components/dropdown/dropdown.ts:242

Returns void

disconnectedCallback

Section titled "disconnectedCallback" 
disconnectedCallback(): void

Defined in src/components/dropdown/dropdown.ts:250

Returns void

hide

Section titled "hide"

Inherited from: EventEmitterMixin< IgcDropdownComponentEventMap, AbstractConstructor<IgcComboBoxBaseLikeComponent> >(IgcComboBoxBaseLikeComponent)

Hides the component.

 
hide(): Promise<boolean>

Defined in src/internals/mixins/combo-box.ts:53

Returns Promise<boolean>

Section titled "navigateTo"

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

 
navigateTo(value: string): IgcDropdownItemComponent | null

Defined in src/components/dropdown/dropdown.ts:569

Parameters

  • value: string

Returns IgcDropdownItemComponent | null

select

Section titled "select"

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

 
select(value: string): IgcDropdownItemComponent | null

Defined in src/components/dropdown/dropdown.ts:587

Parameters

  • value: string

Returns IgcDropdownItemComponent | null

show

Section titled "show"

Shows the component.

 
show(target: string | HTMLElement): Promise<boolean>

Defined in src/components/dropdown/dropdown.ts:545

Parameters

  • target: string | HTMLElement

Returns Promise<boolean>

toggle

Section titled "toggle"

Toggles the open state of the component.

 
toggle(target: string | HTMLElement): Promise<boolean>

Defined in src/components/dropdown/dropdown.ts:561

Parameters

  • target: string | HTMLElement

Returns Promise<boolean>