@vaadin/combo-box 24.0.0-beta1 → 24.0.0-beta3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +12 -12
- package/src/vaadin-combo-box-light.js +1 -1
- package/src/vaadin-combo-box-mixin.js +23 -21
- package/src/vaadin-combo-box.d.ts +2 -0
- package/src/vaadin-combo-box.js +5 -4
- package/web-types.json +18 -18
- package/web-types.lit.json +6 -6
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/combo-box",
|
|
3
|
-
"version": "24.0.0-
|
|
3
|
+
"version": "24.0.0-beta3",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -38,20 +38,20 @@
|
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
40
40
|
"@polymer/polymer": "^3.0.0",
|
|
41
|
-
"@vaadin/component-base": "24.0.0-
|
|
42
|
-
"@vaadin/field-base": "24.0.0-
|
|
43
|
-
"@vaadin/input-container": "24.0.0-
|
|
44
|
-
"@vaadin/item": "24.0.0-
|
|
45
|
-
"@vaadin/lit-renderer": "24.0.0-
|
|
46
|
-
"@vaadin/overlay": "24.0.0-
|
|
47
|
-
"@vaadin/vaadin-lumo-styles": "24.0.0-
|
|
48
|
-
"@vaadin/vaadin-material-styles": "24.0.0-
|
|
49
|
-
"@vaadin/vaadin-themable-mixin": "24.0.0-
|
|
41
|
+
"@vaadin/component-base": "24.0.0-beta3",
|
|
42
|
+
"@vaadin/field-base": "24.0.0-beta3",
|
|
43
|
+
"@vaadin/input-container": "24.0.0-beta3",
|
|
44
|
+
"@vaadin/item": "24.0.0-beta3",
|
|
45
|
+
"@vaadin/lit-renderer": "24.0.0-beta3",
|
|
46
|
+
"@vaadin/overlay": "24.0.0-beta3",
|
|
47
|
+
"@vaadin/vaadin-lumo-styles": "24.0.0-beta3",
|
|
48
|
+
"@vaadin/vaadin-material-styles": "24.0.0-beta3",
|
|
49
|
+
"@vaadin/vaadin-themable-mixin": "24.0.0-beta3"
|
|
50
50
|
},
|
|
51
51
|
"devDependencies": {
|
|
52
52
|
"@esm-bundle/chai": "^4.3.4",
|
|
53
53
|
"@vaadin/testing-helpers": "^0.4.0",
|
|
54
|
-
"@vaadin/text-field": "24.0.0-
|
|
54
|
+
"@vaadin/text-field": "24.0.0-beta3",
|
|
55
55
|
"lit": "^2.0.0",
|
|
56
56
|
"sinon": "^13.0.2"
|
|
57
57
|
},
|
|
@@ -59,5 +59,5 @@
|
|
|
59
59
|
"web-types.json",
|
|
60
60
|
"web-types.lit.json"
|
|
61
61
|
],
|
|
62
|
-
"gitHead": "
|
|
62
|
+
"gitHead": "4daeac63327393aacd9cfaa5abeb031ea86b14a5"
|
|
63
63
|
}
|
|
@@ -599,13 +599,19 @@ export const ComboBoxMixin = (subclass) =>
|
|
|
599
599
|
return event.composedPath()[0] === this.clearElement;
|
|
600
600
|
}
|
|
601
601
|
|
|
602
|
+
/** @private */
|
|
603
|
+
__onClearButtonMouseDown(event) {
|
|
604
|
+
event.preventDefault(); // Prevent native focusout event
|
|
605
|
+
this.inputElement.focus();
|
|
606
|
+
}
|
|
607
|
+
|
|
602
608
|
/**
|
|
603
609
|
* @param {Event} event
|
|
604
610
|
* @protected
|
|
605
611
|
*/
|
|
606
|
-
|
|
612
|
+
_onClearButtonClick(event) {
|
|
607
613
|
event.preventDefault();
|
|
608
|
-
this.
|
|
614
|
+
this._onClearAction();
|
|
609
615
|
|
|
610
616
|
// De-select dropdown item
|
|
611
617
|
if (this.opened) {
|
|
@@ -641,15 +647,13 @@ export const ComboBoxMixin = (subclass) =>
|
|
|
641
647
|
}
|
|
642
648
|
|
|
643
649
|
/** @private */
|
|
644
|
-
_onClick(
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
if (
|
|
648
|
-
this.
|
|
649
|
-
} else if (path.indexOf(this._toggleElement) > -1) {
|
|
650
|
-
this._onToggleButtonClick(e);
|
|
650
|
+
_onClick(event) {
|
|
651
|
+
if (this._isClearButton(event)) {
|
|
652
|
+
this._onClearButtonClick(event);
|
|
653
|
+
} else if (event.composedPath().includes(this._toggleElement)) {
|
|
654
|
+
this._onToggleButtonClick(event);
|
|
651
655
|
} else {
|
|
652
|
-
this._onHostClick(
|
|
656
|
+
this._onHostClick(event);
|
|
653
657
|
}
|
|
654
658
|
}
|
|
655
659
|
|
|
@@ -782,7 +786,11 @@ export const ComboBoxMixin = (subclass) =>
|
|
|
782
786
|
// Do not commit value when custom values are disallowed and input value is not a valid option
|
|
783
787
|
// also stop propagation of the event, otherwise the user could submit a form while the input
|
|
784
788
|
// still contains an invalid value
|
|
785
|
-
|
|
789
|
+
const hasInvalidOption =
|
|
790
|
+
this._focusedIndex < 0 &&
|
|
791
|
+
this._inputElementValue !== '' &&
|
|
792
|
+
this._getItemLabel(this.selectedItem) !== this._inputElementValue;
|
|
793
|
+
if (!this.allowCustomValue && hasInvalidOption) {
|
|
786
794
|
// Do not submit the surrounding form.
|
|
787
795
|
e.preventDefault();
|
|
788
796
|
// Do not trigger global listeners
|
|
@@ -823,7 +831,7 @@ export const ComboBoxMixin = (subclass) =>
|
|
|
823
831
|
} else if (this.clearButtonVisible && !this.opened && !!this.value) {
|
|
824
832
|
e.stopPropagation();
|
|
825
833
|
// The clear button is visible and the overlay is closed, so clear the value.
|
|
826
|
-
this.
|
|
834
|
+
this._onClearAction();
|
|
827
835
|
}
|
|
828
836
|
} else if (this.opened) {
|
|
829
837
|
// Auto-open is enabled
|
|
@@ -841,7 +849,7 @@ export const ComboBoxMixin = (subclass) =>
|
|
|
841
849
|
} else if (this.clearButtonVisible && !!this.value) {
|
|
842
850
|
e.stopPropagation();
|
|
843
851
|
// The clear button is visible and the overlay is closed, so clear the value.
|
|
844
|
-
this.
|
|
852
|
+
this._onClearAction();
|
|
845
853
|
}
|
|
846
854
|
}
|
|
847
855
|
|
|
@@ -863,7 +871,7 @@ export const ComboBoxMixin = (subclass) =>
|
|
|
863
871
|
* Clears the current value.
|
|
864
872
|
* @protected
|
|
865
873
|
*/
|
|
866
|
-
|
|
874
|
+
_onClearAction() {
|
|
867
875
|
this.selectedItem = null;
|
|
868
876
|
|
|
869
877
|
if (this.allowCustomValue) {
|
|
@@ -1266,12 +1274,6 @@ export const ComboBoxMixin = (subclass) =>
|
|
|
1266
1274
|
}
|
|
1267
1275
|
}
|
|
1268
1276
|
|
|
1269
|
-
/** @private */
|
|
1270
|
-
__onClearButtonMouseDown(event) {
|
|
1271
|
-
event.preventDefault(); // Prevent native focusout event
|
|
1272
|
-
this.inputElement.focus();
|
|
1273
|
-
}
|
|
1274
|
-
|
|
1275
1277
|
/** @private */
|
|
1276
1278
|
_onFocusout(event) {
|
|
1277
1279
|
// VoiceOver on iOS fires `focusout` event when moving focus to the item in the dropdown.
|
|
@@ -1304,7 +1306,7 @@ export const ComboBoxMixin = (subclass) =>
|
|
|
1304
1306
|
}
|
|
1305
1307
|
|
|
1306
1308
|
event.preventDefault();
|
|
1307
|
-
this.
|
|
1309
|
+
this._onClearAction();
|
|
1308
1310
|
}
|
|
1309
1311
|
|
|
1310
1312
|
/**
|
|
@@ -11,6 +11,7 @@ import type { ElementMixinClass } from '@vaadin/component-base/src/element-mixin
|
|
|
11
11
|
import type { FocusMixinClass } from '@vaadin/component-base/src/focus-mixin.js';
|
|
12
12
|
import type { KeyboardMixinClass } from '@vaadin/component-base/src/keyboard-mixin.js';
|
|
13
13
|
import type { OverlayClassMixinClass } from '@vaadin/component-base/src/overlay-class-mixin.js';
|
|
14
|
+
import type { ClearButtonMixinClass } from '@vaadin/field-base/src/clear-button-mixin.js';
|
|
14
15
|
import type { FieldMixinClass } from '@vaadin/field-base/src/field-mixin.js';
|
|
15
16
|
import type { InputConstraintsMixinClass } from '@vaadin/field-base/src/input-constraints-mixin.js';
|
|
16
17
|
import type { InputControlMixinClass } from '@vaadin/field-base/src/input-control-mixin.js';
|
|
@@ -238,6 +239,7 @@ interface ComboBox<TItem = ComboBoxDefaultItem>
|
|
|
238
239
|
KeyboardMixinClass,
|
|
239
240
|
OverlayClassMixinClass,
|
|
240
241
|
InputMixinClass,
|
|
242
|
+
ClearButtonMixinClass,
|
|
241
243
|
InputControlMixinClass,
|
|
242
244
|
InputConstraintsMixinClass,
|
|
243
245
|
FocusMixinClass,
|
package/src/vaadin-combo-box.js
CHANGED
|
@@ -287,16 +287,17 @@ class ComboBox extends ComboBoxDataProviderMixin(
|
|
|
287
287
|
}
|
|
288
288
|
|
|
289
289
|
/**
|
|
290
|
-
* Override method
|
|
291
|
-
*
|
|
290
|
+
* Override the method from `InputControlMixin`
|
|
291
|
+
* to stop event propagation to prevent `ComboBoxMixin`
|
|
292
|
+
* from handling this click event also on its own.
|
|
293
|
+
*
|
|
292
294
|
* @param {Event} event
|
|
293
295
|
* @protected
|
|
294
296
|
* @override
|
|
295
297
|
*/
|
|
296
298
|
_onClearButtonClick(event) {
|
|
297
299
|
event.stopPropagation();
|
|
298
|
-
|
|
299
|
-
this._handleClearButtonClick(event);
|
|
300
|
+
super._onClearButtonClick(event);
|
|
300
301
|
}
|
|
301
302
|
|
|
302
303
|
/**
|
package/web-types.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/combo-box",
|
|
4
|
-
"version": "24.0.0-
|
|
4
|
+
"version": "24.0.0-beta3",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -460,7 +460,7 @@
|
|
|
460
460
|
},
|
|
461
461
|
{
|
|
462
462
|
"name": "vaadin-combo-box",
|
|
463
|
-
"description": "`<vaadin-combo-box>` is a web component for choosing a value from a filterable list of options\npresented in a dropdown overlay. The options can be provided as a list of strings or objects\nby setting [`items`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-
|
|
463
|
+
"description": "`<vaadin-combo-box>` is a web component for choosing a value from a filterable list of options\npresented in a dropdown overlay. The options can be provided as a list of strings or objects\nby setting [`items`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-beta3/#/elements/vaadin-combo-box#property-items) property on the element.\n\n```html\n<vaadin-combo-box id=\"combo-box\"></vaadin-combo-box>\n```\n```js\ndocument.querySelector('#combo-box').items = ['apple', 'orange', 'banana'];\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Item rendering\n\nTo customize the content of the `<vaadin-combo-box-item>` elements placed in the dropdown, use\n[`renderer`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-beta3/#/elements/vaadin-combo-box#property-renderer) property which accepts a function.\nThe renderer function is called with `root`, `comboBox`, and `model` as arguments.\n\nGenerate DOM content by using `model` object properties if needed, and append it to the `root`\nelement. The `comboBox` reference is provided to access the combo-box element state. Do not\nset combo-box properties in a `renderer` function.\n\n```js\nconst comboBox = document.querySelector('#combo-box');\ncomboBox.items = [{'label': 'Hydrogen', 'value': 'H'}];\ncomboBox.renderer = (root, comboBox, model) => {\n const item = model.item;\n root.innerHTML = `${model.index}: ${item.label} <b>${item.value}</b>`;\n};\n```\n\nRenderer is called on the opening of the combo-box and each time the related model is updated.\nBefore creating new content, it is recommended to check if there is already an existing DOM\nelement in `root` from a previous renderer call for reusing it. Even though combo-box uses\ninfinite scrolling, reducing DOM operations might improve performance.\n\nThe following properties are available in the `model` argument:\n\nProperty | Type | Description\n-----------|------------------|-------------\n`index` | Number | Index of the item in the `items` array\n`item` | String or Object | The item reference\n`selected` | Boolean | True when item is selected\n`focused` | Boolean | True when item is focused\n\n### Lazy Loading with Function Data Provider\n\nIn addition to assigning an array to the items property, you can alternatively use the\n[`dataProvider`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-beta3/#/elements/vaadin-combo-box#property-dataProvider) function property.\nThe `<vaadin-combo-box>` calls this function lazily, only when it needs more data\nto be displayed.\n\n__Note that when using function data providers, the total number of items\nneeds to be set manually. The total number of items can be returned\nin the second argument of the data provider callback:__\n\n```js\ncomboBox.dataProvider = async (params, callback) => {\n const API = 'https://demo.vaadin.com/demo-data/1.0/filtered-countries';\n const { filter, page, pageSize } = params;\n const index = page * pageSize;\n\n const res = await fetch(`${API}?index=${index}&count=${pageSize}&filter=${filter}`);\n if (res.ok) {\n const { result, size } = await res.json();\n callback(result, size);\n }\n};\n```\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property | Description | Default\n----------------------------------------|----------------------------|---------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n`--vaadin-combo-box-overlay-width` | Width of the overlay | `auto`\n`--vaadin-combo-box-overlay-max-height` | Max height of the overlay | `65vh`\n\n`<vaadin-combo-box>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-beta3/#/elements/vaadin-text-field) for the styling documentation.\n\nIn addition to `<vaadin-text-field>` parts, the following parts are available for theming:\n\nPart name | Description\n----------------|----------------\n`toggle-button` | The toggle button\n\nIn addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:\n\nAttribute | Description | Part name\n----------|-------------|------------\n`opened` | Set when the combo box dropdown is open | :host\n`loading` | Set when new items are expected | :host\n\nIf you want to replace the default `<input>` and its container with a custom implementation to get full control\nover the input field, consider using the [`<vaadin-combo-box-light>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-beta3/#/elements/vaadin-combo-box-light) element.\n\n### Internal components\n\nIn addition to `<vaadin-combo-box>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-combo-box-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-beta3/#/elements/vaadin-overlay).\n- `<vaadin-combo-box-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-beta3/#/elements/vaadin-item).\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-beta3/#/elements/vaadin-input-container) - an internal element wrapping the input.\n\nNote: the `theme` attribute value set on `<vaadin-combo-box>` is\npropagated to the internal components listed above.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
|
|
464
464
|
"attributes": [
|
|
465
465
|
{
|
|
466
466
|
"name": "disabled",
|
|
@@ -551,30 +551,30 @@
|
|
|
551
551
|
}
|
|
552
552
|
},
|
|
553
553
|
{
|
|
554
|
-
"name": "
|
|
555
|
-
"description": "
|
|
554
|
+
"name": "clear-button-visible",
|
|
555
|
+
"description": "Set to true to display the clear icon which clears the input.\n\nIt is up to the component to choose where to place the clear icon:\nin the Shadow DOM or in the light DOM. In any way, a reference to\nthe clear icon element should be provided via the `clearElement` getter.",
|
|
556
556
|
"value": {
|
|
557
557
|
"type": [
|
|
558
|
-
"
|
|
558
|
+
"boolean",
|
|
559
559
|
"null",
|
|
560
560
|
"undefined"
|
|
561
561
|
]
|
|
562
562
|
}
|
|
563
563
|
},
|
|
564
564
|
{
|
|
565
|
-
"name": "
|
|
566
|
-
"description": "
|
|
565
|
+
"name": "allowed-char-pattern",
|
|
566
|
+
"description": "A pattern matched against individual characters the user inputs.\n\nWhen set, the field will prevent:\n- `keydown` events if the entered key doesn't match `/^allowedCharPattern$/`\n- `paste` events if the pasted text doesn't match `/^allowedCharPattern*$/`\n- `drop` events if the dropped text doesn't match `/^allowedCharPattern*$/`\n\nFor example, to allow entering only numbers and minus signs, use:\n`allowedCharPattern = \"[\\\\d-]\"`",
|
|
567
567
|
"value": {
|
|
568
568
|
"type": [
|
|
569
|
-
"
|
|
569
|
+
"string",
|
|
570
570
|
"null",
|
|
571
571
|
"undefined"
|
|
572
572
|
]
|
|
573
573
|
}
|
|
574
574
|
},
|
|
575
575
|
{
|
|
576
|
-
"name": "
|
|
577
|
-
"description": "
|
|
576
|
+
"name": "autoselect",
|
|
577
|
+
"description": "If true, the input text gets fully selected when the field is focused using click or touch / tap.",
|
|
578
578
|
"value": {
|
|
579
579
|
"type": [
|
|
580
580
|
"boolean",
|
|
@@ -845,30 +845,30 @@
|
|
|
845
845
|
}
|
|
846
846
|
},
|
|
847
847
|
{
|
|
848
|
-
"name": "
|
|
849
|
-
"description": "
|
|
848
|
+
"name": "clearButtonVisible",
|
|
849
|
+
"description": "Set to true to display the clear icon which clears the input.\n\nIt is up to the component to choose where to place the clear icon:\nin the Shadow DOM or in the light DOM. In any way, a reference to\nthe clear icon element should be provided via the `clearElement` getter.",
|
|
850
850
|
"value": {
|
|
851
851
|
"type": [
|
|
852
|
-
"
|
|
852
|
+
"boolean",
|
|
853
853
|
"null",
|
|
854
854
|
"undefined"
|
|
855
855
|
]
|
|
856
856
|
}
|
|
857
857
|
},
|
|
858
858
|
{
|
|
859
|
-
"name": "
|
|
860
|
-
"description": "
|
|
859
|
+
"name": "allowedCharPattern",
|
|
860
|
+
"description": "A pattern matched against individual characters the user inputs.\n\nWhen set, the field will prevent:\n- `keydown` events if the entered key doesn't match `/^allowedCharPattern$/`\n- `paste` events if the pasted text doesn't match `/^allowedCharPattern*$/`\n- `drop` events if the dropped text doesn't match `/^allowedCharPattern*$/`\n\nFor example, to allow entering only numbers and minus signs, use:\n`allowedCharPattern = \"[\\\\d-]\"`",
|
|
861
861
|
"value": {
|
|
862
862
|
"type": [
|
|
863
|
-
"
|
|
863
|
+
"string",
|
|
864
864
|
"null",
|
|
865
865
|
"undefined"
|
|
866
866
|
]
|
|
867
867
|
}
|
|
868
868
|
},
|
|
869
869
|
{
|
|
870
|
-
"name": "
|
|
871
|
-
"description": "
|
|
870
|
+
"name": "autoselect",
|
|
871
|
+
"description": "If true, the input text gets fully selected when the field is focused using click or touch / tap.",
|
|
872
872
|
"value": {
|
|
873
873
|
"type": [
|
|
874
874
|
"boolean",
|
package/web-types.lit.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/combo-box",
|
|
4
|
-
"version": "24.0.0-
|
|
4
|
+
"version": "24.0.0-beta3",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -247,7 +247,7 @@
|
|
|
247
247
|
},
|
|
248
248
|
{
|
|
249
249
|
"name": "vaadin-combo-box",
|
|
250
|
-
"description": "`<vaadin-combo-box>` is a web component for choosing a value from a filterable list of options\npresented in a dropdown overlay. The options can be provided as a list of strings or objects\nby setting [`items`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-
|
|
250
|
+
"description": "`<vaadin-combo-box>` is a web component for choosing a value from a filterable list of options\npresented in a dropdown overlay. The options can be provided as a list of strings or objects\nby setting [`items`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-beta3/#/elements/vaadin-combo-box#property-items) property on the element.\n\n```html\n<vaadin-combo-box id=\"combo-box\"></vaadin-combo-box>\n```\n```js\ndocument.querySelector('#combo-box').items = ['apple', 'orange', 'banana'];\n```\n\nWhen the selected `value` is changed, a `value-changed` event is triggered.\n\n### Item rendering\n\nTo customize the content of the `<vaadin-combo-box-item>` elements placed in the dropdown, use\n[`renderer`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-beta3/#/elements/vaadin-combo-box#property-renderer) property which accepts a function.\nThe renderer function is called with `root`, `comboBox`, and `model` as arguments.\n\nGenerate DOM content by using `model` object properties if needed, and append it to the `root`\nelement. The `comboBox` reference is provided to access the combo-box element state. Do not\nset combo-box properties in a `renderer` function.\n\n```js\nconst comboBox = document.querySelector('#combo-box');\ncomboBox.items = [{'label': 'Hydrogen', 'value': 'H'}];\ncomboBox.renderer = (root, comboBox, model) => {\n const item = model.item;\n root.innerHTML = `${model.index}: ${item.label} <b>${item.value}</b>`;\n};\n```\n\nRenderer is called on the opening of the combo-box and each time the related model is updated.\nBefore creating new content, it is recommended to check if there is already an existing DOM\nelement in `root` from a previous renderer call for reusing it. Even though combo-box uses\ninfinite scrolling, reducing DOM operations might improve performance.\n\nThe following properties are available in the `model` argument:\n\nProperty | Type | Description\n-----------|------------------|-------------\n`index` | Number | Index of the item in the `items` array\n`item` | String or Object | The item reference\n`selected` | Boolean | True when item is selected\n`focused` | Boolean | True when item is focused\n\n### Lazy Loading with Function Data Provider\n\nIn addition to assigning an array to the items property, you can alternatively use the\n[`dataProvider`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-beta3/#/elements/vaadin-combo-box#property-dataProvider) function property.\nThe `<vaadin-combo-box>` calls this function lazily, only when it needs more data\nto be displayed.\n\n__Note that when using function data providers, the total number of items\nneeds to be set manually. The total number of items can be returned\nin the second argument of the data provider callback:__\n\n```js\ncomboBox.dataProvider = async (params, callback) => {\n const API = 'https://demo.vaadin.com/demo-data/1.0/filtered-countries';\n const { filter, page, pageSize } = params;\n const index = page * pageSize;\n\n const res = await fetch(`${API}?index=${index}&count=${pageSize}&filter=${filter}`);\n if (res.ok) {\n const { result, size } = await res.json();\n callback(result, size);\n }\n};\n```\n\n### Styling\n\nThe following custom properties are available for styling:\n\nCustom property | Description | Default\n----------------------------------------|----------------------------|---------\n`--vaadin-field-default-width` | Default width of the field | `12em`\n`--vaadin-combo-box-overlay-width` | Width of the overlay | `auto`\n`--vaadin-combo-box-overlay-max-height` | Max height of the overlay | `65vh`\n\n`<vaadin-combo-box>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.\nSee [`<vaadin-text-field>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-beta3/#/elements/vaadin-text-field) for the styling documentation.\n\nIn addition to `<vaadin-text-field>` parts, the following parts are available for theming:\n\nPart name | Description\n----------------|----------------\n`toggle-button` | The toggle button\n\nIn addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:\n\nAttribute | Description | Part name\n----------|-------------|------------\n`opened` | Set when the combo box dropdown is open | :host\n`loading` | Set when new items are expected | :host\n\nIf you want to replace the default `<input>` and its container with a custom implementation to get full control\nover the input field, consider using the [`<vaadin-combo-box-light>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-beta3/#/elements/vaadin-combo-box-light) element.\n\n### Internal components\n\nIn addition to `<vaadin-combo-box>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-combo-box-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-beta3/#/elements/vaadin-overlay).\n- `<vaadin-combo-box-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-beta3/#/elements/vaadin-item).\n- [`<vaadin-input-container>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-beta3/#/elements/vaadin-input-container) - an internal element wrapping the input.\n\nNote: the `theme` attribute value set on `<vaadin-combo-box>` is\npropagated to the internal components listed above.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
|
|
251
251
|
"extension": true,
|
|
252
252
|
"attributes": [
|
|
253
253
|
{
|
|
@@ -279,15 +279,15 @@
|
|
|
279
279
|
}
|
|
280
280
|
},
|
|
281
281
|
{
|
|
282
|
-
"name": "?
|
|
283
|
-
"description": "
|
|
282
|
+
"name": "?clearButtonVisible",
|
|
283
|
+
"description": "Set to true to display the clear icon which clears the input.\n\nIt is up to the component to choose where to place the clear icon:\nin the Shadow DOM or in the light DOM. In any way, a reference to\nthe clear icon element should be provided via the `clearElement` getter.",
|
|
284
284
|
"value": {
|
|
285
285
|
"kind": "expression"
|
|
286
286
|
}
|
|
287
287
|
},
|
|
288
288
|
{
|
|
289
|
-
"name": "?
|
|
290
|
-
"description": "
|
|
289
|
+
"name": "?autoselect",
|
|
290
|
+
"description": "If true, the input text gets fully selected when the field is focused using click or touch / tap.",
|
|
291
291
|
"value": {
|
|
292
292
|
"kind": "expression"
|
|
293
293
|
}
|