@esri/calcite-components 1.0.0-beta.89 → 1.0.0-beta.91

package/dist/collection/components/chip/interfaces.js

@@ -1,6 +1,6 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.89
+ * v1.0.0-beta.91
  */
 export {};

package/dist/collection/components/chip/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.89
+ * v1.0.0-beta.91
  */
 export const CSS = {
   title: "title",

package/dist/collection/components/color-picker/color-picker.css

@@ -75,7 +75,7 @@
 }
 
 :host([hidden]) {
-  display: none;
+  display: none !important;
 }
 
 :host([disabled]) {

package/dist/collection/components/color-picker/color-picker.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.89
+ * v1.0.0-beta.91
  */
 import { Component, Element, Event, h, Listen, Method, Prop, State, Watch } from "@stencil/core";
 import Color from "color";
@@ -11,6 +11,7 @@ import { colorEqual, CSSColorMode, normalizeHex, parseMode } from "./utils";
 import { throttle } from "lodash-es";
 import { clamp } from "../../utils/math";
 import { updateHostInteraction } from "../../utils/interactive";
+import { isActivationKey } from "../../utils/key";
 const throttleFor60FpsInMs = 16;
 const defaultValue = normalizeHex(DEFAULT_COLOR.hex());
 const defaultFormat = "auto";
@@ -199,7 +200,7 @@ export class ColorPicker {
       this.updateChannelsFromColor(this.color);
     };
     this.handleColorFieldScopeKeyDown = (event) => {
-      const key = event.key;
+      const { key } = event;
       const arrowKeyToXYOffset = {
         ArrowUp: { x: 0, y: -10 },
         ArrowRight: { x: 10, y: 0 },
@@ -214,7 +215,7 @@ export class ColorPicker {
     };
     this.handleHueScopeKeyDown = (event) => {
       const modifier = event.shiftKey ? 10 : 1;
-      const key = event.key;
+      const { key } = event;
       const arrowKeyToXOffset = {
         ArrowUp: 1,
         ArrowRight: 1,
@@ -280,7 +281,7 @@ export class ColorPicker {
       this.updateColorFromChannels(channels);
     };
     this.handleSavedColorKeyDown = (event) => {
-      if (event.key === " " || event.key === "Enter") {
+      if (isActivationKey(event.key)) {
         event.preventDefault();
         event.stopPropagation();
         this.handleSavedColorSelect(event);
@@ -550,7 +551,7 @@ export class ColorPicker {
   // using @Listen as a workaround for VDOM listener not firing
   handleChannelKeyUpOrDown(event) {
     this.shiftKeyChannelAdjustment = 0;
-    const key = event.key;
+    const { key } = event;
     if ((key !== "ArrowUp" && key !== "ArrowDown") ||
       !event.composedPath().some((node) => { var _a; return (_a = node.classList) === null || _a === void 0 ? void 0 : _a.contains(CSS.channel); })) {
       return;
@@ -1516,7 +1517,7 @@ export class ColorPicker {
       "method": "calciteColorPickerChange",
       "name": "calciteColorPickerChange",
       "bubbles": true,
-      "cancelable": true,
+      "cancelable": false,
       "composed": true,
       "docs": {
         "tags": [],
@@ -1531,7 +1532,7 @@ export class ColorPicker {
       "method": "calciteColorPickerInput",
       "name": "calciteColorPickerInput",
       "bubbles": true,
-      "cancelable": true,
+      "cancelable": false,
       "composed": true,
       "docs": {
         "tags": [],

package/dist/collection/components/color-picker/interfaces.js

@@ -1,6 +1,6 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.89
+ * v1.0.0-beta.91
  */
 export {};

package/dist/collection/components/color-picker/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.89
+ * v1.0.0-beta.91
  */
 import Color from "color";
 export const CSS = {

package/dist/collection/components/color-picker/utils.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.89
+ * v1.0.0-beta.91
  */
 export function rgbToHex(color) {
   const { r, g, b } = color;

package/dist/collection/components/color-picker-hex-input/color-picker-hex-input.css

@@ -75,7 +75,7 @@
 }
 
 :host([hidden]) {
-  display: none;
+  display: none !important;
 }
 
 :host {
@@ -96,7 +96,6 @@
   margin-inline: 0.25rem;
   display: flex;
   align-items: center;
-  z-index: 1;
 }
 
 .preview,

package/dist/collection/components/color-picker-hex-input/color-picker-hex-input.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.89
+ * v1.0.0-beta.91
  */
 import { Component, Element, Event, h, Listen, Method, Prop, State, Watch } from "@stencil/core";
 import { hexChar, isLonghandHex, isValidHex, normalizeHex, rgbToHex } from "../color-picker/utils";
@@ -94,7 +94,7 @@ export class ColorPickerHexInput {
   onInputKeyDown(event) {
     const { altKey, ctrlKey, metaKey, shiftKey } = event;
     const { internalColor, value } = this;
-    const key = event.key;
+    const { key } = event;
     if (key === "Tab" || key === "Enter") {
       this.onInputChange();
       return;
@@ -317,7 +317,7 @@ export class ColorPickerHexInput {
       "method": "calciteColorPickerHexInputChange",
       "name": "calciteColorPickerHexInputChange",
       "bubbles": true,
-      "cancelable": true,
+      "cancelable": false,
       "composed": true,
       "docs": {
         "tags": [],

package/dist/collection/components/color-picker-hex-input/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.89
+ * v1.0.0-beta.91
  */
 export const CSS = {
   container: "container",

package/dist/collection/components/color-picker-swatch/color-picker-swatch.css

@@ -75,7 +75,7 @@
 }
 
 :host([hidden]) {
-  display: none;
+  display: none !important;
 }
 
 :host {

package/dist/collection/components/color-picker-swatch/color-picker-swatch.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.89
+ * v1.0.0-beta.91
  */
 import { Component, Element, h, Prop, Watch } from "@stencil/core";
 import Color from "color";

package/dist/collection/components/color-picker-swatch/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.89
+ * v1.0.0-beta.91
  */
 export const CSS = {
   swatch: "swatch",

package/dist/collection/components/combobox/combobox.css

@@ -75,7 +75,7 @@
 }
 
 :host([hidden]) {
-  display: none;
+  display: none !important;
 }
 
 :host([disabled]) {
@@ -246,7 +246,6 @@
 }
 
 .floating-ui-container {
-  inline-size: 100%;
   display: block;
   position: absolute;
   z-index: 900;
@@ -257,12 +256,12 @@
 
 .floating-ui-container .calcite-floating-ui-anim {
   position: relative;
-  z-index: 1;
   transition: var(--calcite-floating-ui-transition);
   visibility: hidden;
   transition-property: transform, visibility, opacity;
   opacity: 0;
   box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.16);
+  z-index: 1;
   border-radius: 0.25rem;
 }
 .floating-ui-container[data-placement^=bottom] .calcite-floating-ui-anim {
@@ -307,7 +306,7 @@
 }
 
 .list-container {
-  max-block-size: 100vh;
+  max-block-size: 45vh;
   overflow-y: auto;
   background-color: var(--calcite-ui-foreground-1);
   inline-size: var(--calcite-dropdown-width);

package/dist/collection/components/combobox/combobox.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.89
+ * v1.0.0-beta.91
  */
 import { Component, h, Prop, State, Listen, Event, Element, Method, Watch, Host } from "@stencil/core";
 import { filter } from "../../utils/filter";
@@ -15,6 +15,7 @@ import { afterConnectDefaultValueSet, connectForm, disconnectForm, HiddenFormInp
 import { createObserver } from "../../utils/observers";
 import { updateHostInteraction } from "../../utils/interactive";
 import { toAriaBoolean } from "../../utils/dom";
+import { connectOpenCloseComponent, disconnectOpenCloseComponent } from "../../utils/openCloseComponent";
 const isGroup = (el) => el.tagName === ComboboxItemGroup;
 const itemUidPrefix = "combobox-item-";
 const chipUidPrefix = "combobox-chip-";
@@ -43,7 +44,12 @@ export class Combobox {
     this.disabled = false;
     /** Specify the maximum number of combobox items (including nested children) to display before showing the scroller */
     this.maxItems = 0;
-    /** Describes the type of positioning to use for the overlaid content. If your element is in a fixed container, use the 'fixed' value. */
+    /**
+     * Determines the type of positioning to use for the overlaid content.
+     *
+     * Using the "absolute" value will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. The "fixed" value should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is "fixed".
+     *
+     */
     this.overlayPositioning = "absolute";
     /**
      * When true, makes the component required for form-submission.
@@ -89,7 +95,7 @@ export class Combobox {
     this.guid = guid();
     this.inputHeight = 0;
     this.ignoreSelectedEventsFlag = false;
-    this.activeTransitionProp = "opacity";
+    this.openTransitionProp = "opacity";
     // --------------------------------------------------------------------------
     //
     //  Private Methods
@@ -118,8 +124,7 @@ export class Combobox {
             this.addCustomChip(this.text, true);
             event.preventDefault();
           }
-          else if (this.open || this.active) {
-            this.active = false;
+          else if (this.open) {
             this.open = false;
             event.preventDefault();
           }
@@ -137,9 +142,8 @@ export class Combobox {
           }
           break;
         case "ArrowDown":
-          if (!(this.open || this.active)) {
+          if (!this.open) {
             event.preventDefault();
-            this.active = true;
             this.open = true;
           }
           this.shiftActiveItemIndex(1);
@@ -150,13 +154,12 @@ export class Combobox {
         case " ":
           if (!this.textInput.value) {
             event.preventDefault();
-            this.active = true;
             this.open = true;
             this.shiftActiveItemIndex(1);
           }
           break;
         case "Home":
-          if (this.open || this.active) {
+          if (this.open) {
             event.preventDefault();
           }
           this.updateActiveItemIndex(0);
@@ -166,7 +169,7 @@ export class Combobox {
           }
           break;
         case "End":
-          if (this.open || this.active) {
+          if (this.open) {
             event.preventDefault();
           }
           this.updateActiveItemIndex(this.visibleItems.length - 1);
@@ -176,7 +179,6 @@ export class Combobox {
           }
           break;
         case "Escape":
-          this.active = false;
           this.open = false;
           break;
         case "Enter":
@@ -205,38 +207,25 @@ export class Combobox {
       }
     };
     this.toggleCloseEnd = () => {
-      this.active = false;
       this.open = false;
       this.el.removeEventListener("calciteComboboxClose", this.toggleCloseEnd);
     };
     this.toggleOpenEnd = () => {
-      this.active = true;
       this.open = false;
       this.el.removeEventListener("calciteComboboxOpen", this.toggleOpenEnd);
     };
-    this.transitionEnd = (event) => {
-      if (event.propertyName === this.activeTransitionProp && event.target === this.listContainerEl) {
-        this.open || this.active ? this.onOpen() : this.onClose();
-      }
-    };
-    this.transitionStartHandler = (event) => {
-      if (event.propertyName === this.activeTransitionProp && event.target === this.listContainerEl) {
-        this.open || this.active ? this.onBeforeOpen() : this.onBeforeClose();
-      }
-    };
     this.setMaxScrollerHeight = async () => {
-      const { active, listContainerEl, open } = this;
-      const isOpen = !(active || open);
-      if (!listContainerEl || isOpen) {
+      const { listContainerEl, open, referenceEl } = this;
+      if (!listContainerEl || !open) {
         return;
       }
       await this.reposition();
       const maxScrollerHeight = this.getMaxScrollerHeight();
       listContainerEl.style.maxHeight = maxScrollerHeight > 0 ? `${maxScrollerHeight}px` : "";
+      listContainerEl.style.minWidth = `${referenceEl.clientWidth}px`;
       await this.reposition();
     };
     this.calciteChipDismissHandler = (event, comboboxItem) => {
-      this.active = false;
       this.open = false;
       const selection = this.items.find((item) => item === comboboxItem);
       if (selection) {
@@ -248,15 +237,13 @@ export class Combobox {
       if (event.composedPath().some((node) => node.tagName === "CALCITE-CHIP")) {
         return;
       }
-      this.active = !this.active;
       this.open = !this.open;
       this.updateActiveItemIndex(0);
       this.setFocus();
     };
     this.setInactiveIfNotContained = (event) => {
       const composedPath = event.composedPath();
-      const isOpen = !(this.open || this.active);
-      if (isOpen || composedPath.includes(this.el) || composedPath.includes(this.referenceEl)) {
+      if (!this.open || composedPath.includes(this.el) || composedPath.includes(this.referenceEl)) {
         return;
       }
       if (this.allowCustomValues && this.text.trim().length) {
@@ -270,17 +257,17 @@ export class Combobox {
         this.filterItems("");
         this.updateActiveItemIndex(-1);
       }
-      this.active = false;
       this.open = false;
     };
     this.setFloatingEl = (el) => {
       this.floatingEl = el;
       connectFloatingUI(this, this.referenceEl, this.floatingEl);
     };
-    this.setListContainerEl = (el) => {
+    this.setContainerEl = (el) => {
       this.resizeObserver.observe(el);
       this.listContainerEl = el;
-      this.listContainerEl.addEventListener("transitionstart", this.transitionStartHandler);
+      this.transitionEl = el;
+      connectOpenCloseComponent(this);
     };
     this.setReferenceEl = (el) => {
       this.referenceEl = el;
@@ -362,12 +349,21 @@ export class Combobox {
       this.setInactiveIfNotContained(event);
     };
   }
-  activeHandler() {
+  activeHandler(value) {
     if (this.disabled) {
       this.active = false;
       this.open = false;
       return;
     }
+    this.open = value;
+  }
+  openHandler(value) {
+    if (this.disabled) {
+      this.active = false;
+      this.open = false;
+      return;
+    }
+    this.active = value;
     this.setMaxScrollerHeight();
   }
   handleDisabledChange(value) {
@@ -453,8 +449,15 @@ export class Combobox {
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
     connectLabel(this);
     connectForm(this);
+    connectOpenCloseComponent(this);
     this.reposition();
     this.setFilteredPlacements();
+    if (this.active) {
+      this.activeHandler(this.active);
+    }
+    if (this.open) {
+      this.openHandler(this.open);
+    }
   }
   componentWillLoad() {
     this.updateItems();
@@ -471,13 +474,13 @@ export class Combobox {
     updateHostInteraction(this);
   }
   disconnectedCallback() {
-    var _a, _b, _c;
+    var _a, _b;
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
     disconnectLabel(this);
     disconnectForm(this);
     disconnectFloatingUI(this, this.referenceEl, this.floatingEl);
-    (_c = this.listContainerEl) === null || _c === void 0 ? void 0 : _c.removeEventListener("transitionstart", this.transitionStartHandler);
+    disconnectOpenCloseComponent(this);
   }
   selectedItemsHandler() {
     this.internalValueChangeFlag = true;
@@ -561,7 +564,6 @@ export class Combobox {
       if (this.textInput) {
         this.textInput.value = item.textLabel;
       }
-      this.active = false;
       this.open = false;
       this.updateActiveItemIndex(-1);
       this.resetText();
@@ -769,7 +771,7 @@ export class Combobox {
     return this.visibleItems.map((item) => (h("li", { "aria-selected": toAriaBoolean(item.selected), id: item.guid ? `${itemUidPrefix}${item.guid}` : null, role: "option", tabindex: "-1" }, item.textLabel)));
   }
   renderFloatingUIContainer() {
-    const { active, setFloatingEl, setListContainerEl, open } = this;
+    const { active, setFloatingEl, setContainerEl, open } = this;
     const classes = {
       "list-container": true,
       [FloatingCSS.animation]: true,
@@ -779,7 +781,7 @@ export class Combobox {
         "floating-ui-container": true,
         "floating-ui-container--active": open || active
       }, ref: setFloatingEl },
-      h("div", { class: classes, onTransitionEnd: this.transitionEnd, ref: setListContainerEl },
+      h("div", { class: classes, ref: setContainerEl },
         h("ul", { class: { list: true, "list--hide": !(open || active) } },
           h("slot", null)))));
   }
@@ -1002,7 +1004,7 @@ export class Combobox {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Describes the type of positioning to use for the overlaid content. If your element is in a fixed container, use the 'fixed' value."
+        "text": "Determines the type of positioning to use for the overlaid content.\n\nUsing the \"absolute\" value will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. The \"fixed\" value should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is \"fixed\"."
       },
       "attribute": "overlay-positioning",
       "reflect": false,
@@ -1150,7 +1152,7 @@ export class Combobox {
       "method": "calciteLookupChange",
       "name": "calciteLookupChange",
       "bubbles": true,
-      "cancelable": true,
+      "cancelable": false,
       "composed": true,
       "docs": {
         "tags": [{
@@ -1172,14 +1174,14 @@ export class Combobox {
       "method": "calciteComboboxChange",
       "name": "calciteComboboxChange",
       "bubbles": true,
-      "cancelable": true,
+      "cancelable": false,
       "composed": true,
       "docs": {
         "tags": [],
         "text": "Called when the selected item(s) changes."
       },
       "complexType": {
-        "original": "{ selectedItems: HTMLCalciteComboboxItemElement[] }",
+        "original": "{\n    selectedItems: HTMLCalciteComboboxItemElement[];\n  }",
         "resolved": "{ selectedItems: HTMLCalciteComboboxItemElement[]; }",
         "references": {
           "HTMLCalciteComboboxItemElement": {
@@ -1191,7 +1193,7 @@ export class Combobox {
       "method": "calciteComboboxFilterChange",
       "name": "calciteComboboxFilterChange",
       "bubbles": true,
-      "cancelable": true,
+      "cancelable": false,
       "composed": true,
       "docs": {
         "tags": [],
@@ -1210,7 +1212,7 @@ export class Combobox {
       "method": "calciteComboboxChipDismiss",
       "name": "calciteComboboxChipDismiss",
       "bubbles": true,
-      "cancelable": true,
+      "cancelable": false,
       "composed": true,
       "docs": {
         "tags": [],
@@ -1230,7 +1232,7 @@ export class Combobox {
       "method": "calciteComboboxBeforeClose",
       "name": "calciteComboboxBeforeClose",
       "bubbles": true,
-      "cancelable": true,
+      "cancelable": false,
       "composed": true,
       "docs": {
         "tags": [],
@@ -1245,7 +1247,7 @@ export class Combobox {
       "method": "calciteComboboxClose",
       "name": "calciteComboboxClose",
       "bubbles": true,
-      "cancelable": true,
+      "cancelable": false,
       "composed": true,
       "docs": {
         "tags": [],
@@ -1260,7 +1262,7 @@ export class Combobox {
       "method": "calciteComboboxBeforeOpen",
       "name": "calciteComboboxBeforeOpen",
       "bubbles": true,
-      "cancelable": true,
+      "cancelable": false,
       "composed": true,
       "docs": {
         "tags": [],
@@ -1275,7 +1277,7 @@ export class Combobox {
       "method": "calciteComboboxOpen",
       "name": "calciteComboboxOpen",
       "bubbles": true,
-      "cancelable": true,
+      "cancelable": false,
       "composed": true,
       "docs": {
         "tags": [],
@@ -1327,7 +1329,7 @@ export class Combobox {
       "methodName": "activeHandler"
     }, {
       "propName": "open",
-      "methodName": "activeHandler"
+      "methodName": "openHandler"
     }, {
       "propName": "disabled",
       "methodName": "handleDisabledChange"
@@ -1351,11 +1353,11 @@ export class Combobox {
       "methodName": "textHandler"
     }]; }
   static get listeners() { return [{
-      "name": "click",
+      "name": "pointerdown",
       "method": "documentClickHandler",
       "target": "document",
       "capture": false,
-      "passive": false
+      "passive": true
     }, {
       "name": "calciteComboboxItemChange",
       "method": "calciteComboboxItemChangeHandler",

package/dist/collection/components/combobox/interfaces.js

@@ -1,6 +1,6 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.89
+ * v1.0.0-beta.91
  */
 export {};

package/dist/collection/components/combobox/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.89
+ * v1.0.0-beta.91
  */
 export const ComboboxItem = "CALCITE-COMBOBOX-ITEM";
 export const ComboboxItemGroup = "CALCITE-COMBOBOX-ITEM-GROUP";

package/dist/collection/components/combobox/utils.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.89
+ * v1.0.0-beta.91
  */
 import { nodeListToArray } from "../../utils/dom";
 import { ComboboxChildSelector } from "./resources";

package/dist/collection/components/combobox-item/combobox-item.css

@@ -76,7 +76,7 @@
 }
 
 :host([hidden]) {
-  display: none;
+  display: none !important;
 }
 
 :host([disabled]){

package/dist/collection/components/combobox-item/combobox-item.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.89
+ * v1.0.0-beta.91
  */
 import { Component, Element, Event, Host, Method, Prop, h, Watch } from "@stencil/core";
 import { getElementProp, getSlotted } from "../../utils/dom";
@@ -317,7 +317,7 @@ export class ComboboxItem {
       "method": "calciteComboboxItemChange",
       "name": "calciteComboboxItemChange",
       "bubbles": true,
-      "cancelable": true,
+      "cancelable": false,
       "composed": true,
       "docs": {
         "tags": [],