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.
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
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
_overlayContentNode	protected
_overlayInvokerNode	protected
_overlayReferenceNode	protected
_selectionDisplayNode	protected	SelectionDisplay | null

Methods

Name	Privacy	Description	Parameters	Return	Inherited From
clear	public
matchCondition	public	When the preconfigurable `match-mode` conditions are not sufficient, one can define a custom matching function.	option: LionOption, textboxValue: string
parser	public	Converts viewValue to modelValue	value: string|string[]	*
reset	public
_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.
_defineOverlayConfig	protected
_enhanceLightDomClasses	protected
_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
_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
_setTextboxValue	protected		v: string
_setupListboxNode	protected
_setupOpenCloseListeners	protected
_setupOverlayCtrl	protected
_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
_teardownOverlayCtrl	protected
_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

Attributes

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

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>

---