Combobox: API Table

class: LionCombobox, lion-combobox

Fields

Name	Privacy	Type	Default	Description	Inherited From
allowCustomChoice	public	boolean
autocomplete	public	'none'|'list'|'inline'|'both'	'both'	When “list”, will filter listbox suggestions based on textbox value. When “both”, an inline completion string will be added to the textbox as well.
config	public	Partial<OverlayConfig>	{}	Configure the many options of the `OverlayController`	OverlayMixin
matchMode	public	'begin'|'all'	'all'	When typing in the textbox, will by default be set on ‘begin’, only matching the beginning part in suggestion list. => ‘a’ will match ‘apple’ from [‘apple’, ‘pear’, ‘citrus’]. When set to ‘all’, will match middle of the word as well => ‘a’ will match ‘apple’ and ‘pear’
modelValue	public
opened	public	boolean	false	If you add the opened attribute a dialog will be opened on page load. The invoker can be left out in case the user does not need to be able to reopen the dialog.	OverlayMixin
requireOptionMatch	public	boolean	true	If set to false, the value is allowed to not match any of the options. We set the default to true for backwards compatibility
rotateKeyboardNavigation	public	boolean	true
selectionFollowsFocus	public	boolean	true
showAllOnEmpty	public	boolean	false	When true, the listbox is open and textbox goes from a value to empty, all options are shown. By default, the listbox closes on empty, similar to wai-aria example and <datalist>
slots	public	SlotsMap
value	public			We define the value getter/setter below as also defined in LionField (via FormatMixin). Since FormatMixin is meant for Formgroups/ChoiceGroup it’s not applied on Combobox; Combobox is somewhat of a hybrid between a ChoiceGroup and LionField, therefore we copy over some of the LionField members to align with its interface. The view value. Will be delegated to `._inputNode.value`
_activeDescendantOwnerNode	protected
_ariaVersion	protected	'1.1'|'1.0'		For optimal support, we allow aria v1.1 on newer browsers
_comboboxNode	protected	HTMLElement		Wrapper with combobox role for the text input that the end user controls the listbox with.
_feedbackConditionMeta	protected				LionListbox
_focusableNode	protected				LionListbox
_inputNode	protected
_listboxNode	protected
_listboxReceivesNoFocus	protected	boolean	true
_noTypeAhead	protected	boolean	true
_overlayBackdropNode	protected				OverlayMixin
_overlayContentNode	protected				OverlayMixin
_overlayContentWrapperNode	protected				OverlayMixin
_overlayInvokerNode	protected			The node that opens/closes this overlay. Resolved in a stable, declarative way (independent of the exact DOM order) by looking, in order, for: 1. a child with `[slot=“invoker”]` 2. any element in the same root that opts in via `[data-invoker]` and references this host by id (`for=“<id>”`) 3. a preceding sibling that opts in via `[data-invoker]`	OverlayMixin
_overlayReferenceNode	protected				OverlayMixin
_selectionDisplayNode	protected	SelectionDisplay | null

Methods

Name	Privacy	Description	Parameters	Return	Inherited From
clear	public
close	public	Hides the overlay			OverlayMixin
matchCondition	public	When the preconfigurable `match-mode` conditions are not sufficient, one can define a custom matching function.	option: LionOption, textboxValue: string
open	public	Shows the overlay			OverlayMixin
parser	public	Converts viewValue to modelValue	value: string|string[]	*
repositionOverlay	public	Sometimes it’s needed to recompute Popper position of an overlay, for instance when we have an opened combobox and the surrounding context changes (the space consumed by the textbox increases vertically)			OverlayMixin
reset	public
toggle	public	Toggles the overlay			OverlayMixin
_autoSelectCondition	protected	When this condition is false, an end user will have to manually select a suggested option from the list (by default when autocomplete is ‘none’ or ‘list’). For autocomplete ‘both’ or ‘inline’, it will automatically select on a match.
_defineOverlay	protected		{ contentNode, invokerNode, referenceNode, backdropNode, contentWrapperNode }, config: DefineOverlayConfig	OverlayController	OverlayMixin
_defineOverlayConfig	protected			OverlayConfig	OverlayMixin
_enhanceLightDomClasses	protected
_getInvokerNode	protected			Element|null	OverlayMixin
_getTextboxValueFromOption	protected	Return the value to be used for the input value	option: LionOption	string
_groupTwoTemplate	protected
_handleAutocompletion	protected	Handles autocompletion. This entails: - list: shows a list on keydown character press - filter: filters list of potential matches according to matchmode or provided matchCondition - focus: automatically focuses closest match (makes it the activedescendant) - check: automatically checks/selects closest match when selection-follows-focus is enabled (this is the default configuration) - complete: completes the textbox value inline (the ‘missing characters’ will be added as selected text)
_highlightMatchedOption	protected		option: Element, matchingString: string
_inputGroupInputTemplate	protected
_isPermanentlyDisconnected	protected	When we’re moving around in dom, disconnectedCallback gets called. Before we decide to teardown, let’s wait to see if we were not just moving nodes around.		Promise<boolean>	OverlayMixin
_listboxOnClick	protected		ev: MouseEvent
_listboxOnKeyDown	protected		ev: KeyboardEvent
_onFilterMatch	protected		option: LionOption & {__originalInnerHTML?:string}, matchingString: string
_onFilterUnmatch	protected		option: LionOption & {__originalInnerHTML?:string}, curValue: string, prevValue: string
_onKeyUp	protected		ev: KeyboardEvent
_onListboxContentChanged	protected
_overlayListboxTemplate	protected
_repropagationCondition	protected		target: FormControlHost
_resetListboxOptions	protected
_setOpenedWithoutPropertyEffects	protected	When the opened state is changed by an Application Developer,cthe OverlayController is requested to show/hide. It might happen that this request is not honoured (intercepted in before-hide for instance), so that we need to sync the controller state to this webcomponent again, preventing eternal loops.	newOpened: boolean		OverlayMixin
_setTextboxValue	protected		v: string
_setupListboxNode	protected
_setupOpenCloseListeners	protected				OverlayMixin
_setupOverlayCtrl	protected				OverlayMixin
_showOverlayCondition	protected		{ lastKey }, options: { currentValue?: string, lastKey?: string }	boolean
_syncToTextboxCondition	protected		modelValue: string|string[], oldModelValue: string|string[], { phase }, config: {phase?:string}
_syncToTextboxMultiple	protected		modelValue: string[], oldModelValue: string[]
_teardownOpenCloseListeners	protected				OverlayMixin
_teardownOverlayCtrl	protected				OverlayMixin
_textboxOnClick	protected		ev: FocusEvent
_textboxOnInput	protected		ev: Event
_textboxOnKeydown	protected		ev: KeyboardEvent
_unhighlightMatchedOption	protected		option: Element

Events

Name	Type	Description	Inherited From
model-value-changed	CustomEvent
opened-changed	CustomEvent		OverlayMixin

Attributes

Name	Field	Inherited From
autocomplete	autocomplete
match-mode	matchMode
show-all-on-empty	showAllOnEmpty
requireOptionMatch	requireOptionMatch
allow-custom-choice	allowCustomChoice
__shouldAutocompleteNextUpdate	__shouldAutocompleteNextUpdate
opened	opened	OverlayMixin

Slots

Name	Description
listbox	The listbox element for the combobox, e.g. <lion-options>
selection-display	The selection display element for the combobox, e.g. <lion-selection-display>

---