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:165

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:158

keepOpenOnOutsideClick

Section titled "keepOpenOnOutsideClick"

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

Keeps the dropdown of the component open when the user clicks outside of it.

 
keepOpenOnOutsideClick: boolean = false

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

keepOpenOnSelect

Section titled "keepOpenOnSelect"

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

Keeps the dropdown of the component open after the user selects an item.

 
keepOpenOnSelect: boolean = false

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

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:34

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:150

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:172

scrollStrategy

Section titled "scrollStrategy"

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

Sets the behavior of the component when the parent container scrolls.

If the value is hide, the component hides while the anchor is fully out of view. hide is the default value.

If the value is scroll, the component stays visible and anchored.

If the value is close, the component closes on each scroll.

 
scrollStrategy: PopoverScrollStrategy = 'hide'

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

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:84

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:182

Returns IgcDropdownGroupComponent[]

items

Section titled "items"

Returns the items of the dropdown.

 
get items(): IgcDropdownItemComponent[]

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

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:192

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:580

Returns void

connectedCallback

Section titled "connectedCallback" 
connectedCallback(): void

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

Returns void

disconnectedCallback

Section titled "disconnectedCallback" 
disconnectedCallback(): void

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

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:69

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:550

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:568

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:526

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:542

Parameters

  • target: string | HTMLElement

Returns Promise<boolean>