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.

Constructors

Section titled "Constructors"

IgcDropdownComponent 

new IgcDropdownComponent(): IgcDropdownComponent

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

Returns IgcDropdownComponent

Properties

Section titled "Properties"

distance

Section titled "distance"

The distance from the target element.

 
distance: number = 0

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

emitEvent

Section titled "emitEvent"

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

emitEvent: object & object

Defined in src/components/common/mixins/event-emitter.ts:30, src/components/common/mixins/combo-box.ts:16

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

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/components/common/mixins/combo-box.ts:120

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/components/common/mixins/combo-box.ts:108

open

Section titled "open"

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

Sets the open state of the component.

 
open: boolean = false

Defined in src/components/common/mixins/combo-box.ts:32

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

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

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

styles

Section titled "styles" 
styles: CSSResult[]

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

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

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

Returns IgcDropdownGroupComponent[]

items

Section titled "items"

Returns the items of the dropdown.

 
get items(): IgcDropdownItemComponent[]

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

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

Returns IgcDropdownItemComponent | null

Methods

Section titled "Methods"

addEventListener

Section titled "addEventListener"

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

addEventListener(type: K, listener: object, options: boolean | AddEventListenerOptions): void

Defined in src/components/common/mixins/event-emitter.ts:7

Parameters

  • type: K
  • listener: object
  • options: boolean | AddEventListenerOptions

Returns void

clearSelection

Section titled "clearSelection"

Clears the current selection of the dropdown.

 
clearSelection(): void

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

Returns void

disconnectedCallback

Section titled "disconnectedCallback"

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.

``

An element may be re-connected after being disconnected.

 
disconnectedCallback(): void

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

Returns void

hide

Section titled "hide"

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

Hides the component.

 
hide(): Promise<boolean>

Defined in src/components/common/mixins/combo-box.ts:90

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

Parameters

  • value: string

Returns IgcDropdownItemComponent | null

removeEventListener

Section titled "removeEventListener"

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

removeEventListener(type: K, listener: object, options: boolean | EventListenerOptions): void

Defined in src/components/common/mixins/event-emitter.ts:17

Parameters

  • type: K
  • listener: object
  • options: boolean | EventListenerOptions

Returns void

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

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

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

Parameters

  • target: string | HTMLElement

Returns Promise<boolean>

register

Section titled "register" 
register(): void

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

Returns void

Events

Section titled "Events"

igcChange

Section titled "igcChange" 
igcChange: CustomEvent<IgcDropdownItemComponent>

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

igcClosed

Section titled "igcClosed" 
igcClosed: CustomEvent<void>

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

igcClosing

Section titled "igcClosing" 
igcClosing: CustomEvent<void>

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

igcOpened

Section titled "igcOpened" 
igcOpened: CustomEvent<void>

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

igcOpening

Section titled "igcOpening" 
igcOpening: CustomEvent<void>

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