arcgis-value-picker-combobox | References | ArcGIS Maps SDK for JavaScript

ESM

import "@arcgis/common-components/components/arcgis-value-picker-combobox";

Inheritance: ArcgisValuePickerCombobox→HTMLElement

Demo

Properties

Property	Attribute	Type
autoDestroyDisabled	auto-destroy-disabled	boolean
canNext	can-next	boolean
canPlay	can-play	boolean
canPrevious	can-previous	boolean
currentValue		ComboboxItem \| undefined
disabled	disabled	boolean
items		ComboboxItem[] \| undefined

autoDestroyDisabled

Property

Type: boolean

If true, the component will not be destroyed automatically when it is disconnected from the document. This is useful when you want to move the component to a different place on the page, or temporarily hide it. If this is set, make sure to call the destroy() method when you are done to prevent memory leaks.

Attribute: auto-destroy-disabled
Default value: false

canNext

Property

Type: boolean

Determines whether the user can interact with the next button. This property is automatically set to false when currentValue matches the last index of items.

Attribute: can-next
Default value: false

Example

const valuePicker = document.querySelector("arcgis-value-picker");
const valuePickerCombobox = document.querySelector("arcgis-value-picker-combobox");

valuePickerCombobox.items = [
  { value: "ind", label: "Industrial" },
  { value: "res", label: "Residential" },
  { value: "com", label: "Commercial" }
];
valuePickerCombobox.currentValue = valuePickerCombobox.items[0];
if (valuePickerCombobox.canNext === true) {
  valuePicker.next();
  console.log(valuePickerCombobox.currentValue.label); // "Residential"
}

canPlay

Property

Type: boolean

Determines whether the user can interact with the play/pause button.

Attribute: can-play
Default value: false

canPrevious

Property

Type: boolean

Determines whether the user can interact with the previous button. This property is automatically set to false when currentValue matches the first index of items.

Attribute: can-previous
Default value: false

Example

const valuePicker = document.querySelector("arcgis-value-picker");
const valuePickerCombobox = document.querySelector("arcgis-value-picker-combobox");

valuePickerCombobox.items = [
  { value: "ind", label: "Industrial" },
  { value: "res", label: "Residential" },
  { value: "com", label: "Commercial" }
];
valuePickerCombobox.currentValue = valuePickerCombobox.items[1];
if (valuePickerCombobox.canPrevious === true) {
  valuePicker.previous();
  console.log(valuePickerCombobox.currentValue.label); // "Industrial"
}

currentValue

Property

Type: ComboboxItem | undefined

The currently selected combobox item rendered by the component.

disabled

Property

Type: boolean

When true, the component is visually withdrawn and cannot receive user interaction.

Attribute: disabled
Default value: false

items

Property

Type: ComboboxItem[] | undefined

The array of combobox items that arcgis-value-picker can iterate over.

Methods

Method	Signature
componentOnReady inherited	componentOnReady(): Promise<this>
destroy	destroy(): Promise<void>

componentOnReady

inherited Method

Signature: componentOnReady (): Promise<this>

Creates a promise that resolves once the component is fully loaded.

Returns: Promise<this>

Example

const arcgisValuePickerCombobox = document.createElement("arcgis-value-picker-combobox");
document.body.append(arcgisValuePickerCombobox);
await arcgisValuePickerCombobox.componentOnReady();
console.log("arcgis-value-picker-combobox is ready to go!");

destroy

Method

Signature: destroy (): Promise<void>

Permanently destroys the component.

Returns: Promise<void>

Events

Name	Type
arcgisPropertyChange	CustomEvent<{ name: "canNext" \| "canPlay" \| "canPrevious" \| "currentValue"; }>

arcgisPropertyChange

Event

arcgisPropertyChange: CustomEvent<{ name: "canNext" | "canPlay" | "canPrevious" | "currentValue"; }>