fix: ensure mouse events are blocked for disabled components in Firefox

packages/calcite-components/src/components/action/action.tsx

@@ -13,7 +13,12 @@ import {
 } from "@stencil/core";
 import { toAriaBoolean } from "../../utils/dom";
 import { guid } from "../../utils/guid";
-import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive";
+import {
+  connectInteractive,
+  disconnectInteractive,
+  InteractiveComponent,
+  updateHostInteraction
+} from "../../utils/interactive";
 import {
   componentLoaded,
   LoadableComponent,
@@ -163,6 +168,7 @@ export class Action
   // --------------------------------------------------------------------------
 
   connectedCallback(): void {
+    connectInteractive(this);
     connectLocalized(this);
     connectMessages(this);
     this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
@@ -180,6 +186,7 @@ export class Action
   }
 
   disconnectedCallback(): void {
+    disconnectInteractive(this);
     disconnectLocalized(this);
     disconnectMessages(this);
     this.mutationObserver?.disconnect();

packages/calcite-components/src/components/block/block.tsx

@@ -17,7 +17,12 @@ import {
 } from "../../utils/conditionalSlot";
 import { getSlotted, toAriaBoolean } from "../../utils/dom";
 import { guid } from "../../utils/guid";
-import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive";
+import {
+  connectInteractive,
+  disconnectInteractive,
+  InteractiveComponent,
+  updateHostInteraction
+} from "../../utils/interactive";
 import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale";
 import {
   connectMessages,
@@ -143,11 +148,13 @@ export class Block
 
   connectedCallback(): void {
     connectConditionalSlotComponent(this);
+    connectInteractive(this);
     connectLocalized(this);
     connectMessages(this);
   }
 
   disconnectedCallback(): void {
+    disconnectInteractive(this);
     disconnectLocalized(this);
     disconnectMessages(this);
     disconnectConditionalSlotComponent(this);

packages/calcite-components/src/components/button/button.tsx

@@ -1,6 +1,11 @@
 import { Build, Component, Element, h, Method, Prop, State, VNode, Watch } from "@stencil/core";
 import { findAssociatedForm, FormOwner, resetForm, submitForm } from "../../utils/form";
-import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive";
+import {
+  connectInteractive,
+  disconnectInteractive,
+  InteractiveComponent,
+  updateHostInteraction
+} from "../../utils/interactive";
 import { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from "../../utils/label";
 import {
   componentLoaded,
@@ -175,6 +180,7 @@ export class Button
   //--------------------------------------------------------------------------
 
   async connectedCallback(): Promise<void> {
+    connectInteractive(this);
     connectLocalized(this);
     connectMessages(this);
     this.hasLoader = this.loading;
@@ -185,6 +191,7 @@ export class Button
 
   disconnectedCallback(): void {
     this.mutationObserver?.disconnect();
+    disconnectInteractive(this);
     disconnectLabel(this);
     disconnectLocalized(this);
     disconnectMessages(this);

packages/calcite-components/src/components/checkbox/checkbox.tsx

@@ -17,7 +17,12 @@ import {
   HiddenFormInputSlot
 } from "../../utils/form";
 import { guid } from "../../utils/guid";
-import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive";
+import {
+  connectInteractive,
+  disconnectInteractive,
+  InteractiveComponent,
+  updateHostInteraction
+} from "../../utils/interactive";
 import { isActivationKey } from "../../utils/key";
 import { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from "../../utils/label";
 import {
@@ -226,11 +231,13 @@ export class Checkbox
 
   connectedCallback(): void {
     this.guid = this.el.id || `calcite-checkbox-${guid()}`;
+    connectInteractive(this);
     connectLabel(this);
     connectForm(this);
   }
 
   disconnectedCallback(): void {
+    disconnectInteractive(this);
     disconnectLabel(this);
     disconnectForm(this);
   }

packages/calcite-components/src/components/chip-group/chip-group.tsx

@@ -11,7 +11,12 @@ import {
   Watch
 } from "@stencil/core";
 import { focusElementInGroup, toAriaBoolean } from "../../utils/dom";
-import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive";
+import {
+  connectInteractive,
+  disconnectInteractive,
+  InteractiveComponent,
+  updateHostInteraction
+} from "../../utils/interactive";
 import { createObserver } from "../../utils/observers";
 import { Scale, SelectionMode } from "../interfaces";
 import { componentLoaded, setComponentLoaded, setUpLoadableComponent } from "../../utils/loadable";
@@ -93,10 +98,12 @@ export class ChipGroup implements InteractiveComponent {
   //--------------------------------------------------------------------------
 
   connectedCallback(): void {
+    connectInteractive(this);
     this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
   }
 
   componentDidRender(): void {
+    disconnectInteractive(this);
     updateHostInteraction(this);
   }
 

packages/calcite-components/src/components/chip/chip.tsx

@@ -35,7 +35,12 @@ import {
   T9nComponent,
   updateMessages
 } from "../../utils/t9n";
-import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive";
+import {
+  connectInteractive,
+  disconnectInteractive,
+  InteractiveComponent,
+  updateHostInteraction
+} from "../../utils/interactive";
 import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale";
 import { createObserver } from "../../utils/observers";
 import { isActivationKey } from "../../utils/key";
@@ -196,6 +201,7 @@ export class Chip
 
   connectedCallback(): void {
     connectConditionalSlotComponent(this);
+    connectInteractive(this);
     connectLocalized(this);
     connectMessages(this);
     this.setupTextContentObserver();
@@ -211,6 +217,7 @@ export class Chip
 
   disconnectedCallback(): void {
     disconnectConditionalSlotComponent(this);
+    disconnectInteractive(this);
     disconnectLocalized(this);
     disconnectMessages(this);
   }

packages/calcite-components/src/components/color-picker/color-picker.tsx

@@ -43,7 +43,12 @@ import {
   toNonAlphaMode
 } from "./utils";
 
-import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive";
+import {
+  connectInteractive,
+  disconnectInteractive,
+  InteractiveComponent,
+  updateHostInteraction
+} from "../../utils/interactive";
 import { isActivationKey } from "../../utils/key";
 import {
   componentLoaded,
@@ -687,6 +692,7 @@ export class ColorPicker
   }
 
   connectedCallback(): void {
+    connectInteractive(this);
     connectLocalized(this);
     connectMessages(this);
   }
@@ -698,6 +704,7 @@ export class ColorPicker
   disconnectedCallback(): void {
     document.removeEventListener("pointermove", this.globalPointerMoveHandler);
     document.removeEventListener("pointerup", this.globalPointerUpHandler);
+    disconnectInteractive(this);
     disconnectLocalized(this);
     disconnectMessages(this);
   }

packages/calcite-components/src/components/combobox-item/combobox-item.tsx

@@ -16,7 +16,12 @@ import {
 } from "../../utils/conditionalSlot";
 import { getElementProp, getSlotted } from "../../utils/dom";
 import { guid } from "../../utils/guid";
-import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive";
+import {
+  connectInteractive,
+  disconnectInteractive,
+  InteractiveComponent,
+  updateHostInteraction
+} from "../../utils/interactive";
 import { ComboboxChildElement } from "../combobox/interfaces";
 import { getAncestors, getDepth } from "../combobox/utils";
 import { Scale } from "../interfaces";
@@ -99,10 +104,12 @@ export class ComboboxItem implements ConditionalSlotComponent, InteractiveCompon
     this.ancestors = getAncestors(this.el);
     this.scale = getElementProp(this.el, "scale", this.scale);
     connectConditionalSlotComponent(this);
+    connectInteractive(this);
   }
 
   disconnectedCallback(): void {
     disconnectConditionalSlotComponent(this);
+    disconnectInteractive(this);
   }
 
   componentDidRender(): void {

packages/calcite-components/src/components/combobox/combobox.tsx

@@ -37,7 +37,12 @@ import {
   submitForm
 } from "../../utils/form";
 import { guid } from "../../utils/guid";
-import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive";
+import {
+  connectInteractive,
+  disconnectInteractive,
+  InteractiveComponent,
+  updateHostInteraction
+} from "../../utils/interactive";
 import { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from "../../utils/label";
 import {
   componentLoaded,
@@ -387,6 +392,7 @@ export class Combobox
   // --------------------------------------------------------------------------
 
   connectedCallback(): void {
+    connectInteractive(this);
     connectLocalized(this);
     connectMessages(this);
     this.internalValueChangeFlag = true;
@@ -427,6 +433,7 @@ export class Combobox
   disconnectedCallback(): void {
     this.mutationObserver?.disconnect();
     this.resizeObserver?.disconnect();
+    disconnectInteractive(this);
     disconnectLabel(this);
     disconnectForm(this);
     disconnectFloatingUI(this, this.referenceEl, this.floatingEl);

packages/calcite-components/src/components/date-picker-day/date-picker-day.tsx

@@ -12,7 +12,12 @@ import {
 import { dateToISO } from "../../utils/date";
 
 import { closestElementCrossShadowBoundary, getElementDir, toAriaBoolean } from "../../utils/dom";
-import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive";
+import {
+  connectInteractive,
+  disconnectInteractive,
+  InteractiveComponent,
+  updateHostInteraction
+} from "../../utils/interactive";
 import { isActivationKey } from "../../utils/key";
 import { numberStringFormatter } from "../../utils/locale";
 import { CSS_UTILITY } from "../../utils/resources";
@@ -185,10 +190,18 @@ export class DatePickerDay implements InteractiveComponent {
     );
   }
 
+  connectedCallback(): void {
+    connectInteractive(this);
+  }
+
   componentDidRender(): void {
     updateHostInteraction(this, this.isTabbable);
   }
 
+  disconnectedCallback(): void {
+    disconnectInteractive(this);
+  }
+
   isTabbable(): boolean {
     return this.active;
   }

packages/calcite-components/src/components/dropdown/dropdown.tsx

@@ -32,7 +32,12 @@ import {
   reposition
 } from "../../utils/floating-ui";
 import { guid } from "../../utils/guid";
-import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive";
+import {
+  connectInteractive,
+  disconnectInteractive,
+  InteractiveComponent,
+  updateHostInteraction
+} from "../../utils/interactive";
 import { isActivationKey } from "../../utils/key";
 import {
   componentLoaded,
@@ -212,6 +217,7 @@ export class Dropdown
     if (this.open) {
       this.openHandler(this.open);
     }
+    connectInteractive(this);
     connectOpenCloseComponent(this);
   }
 
@@ -230,8 +236,9 @@ export class Dropdown
 
   disconnectedCallback(): void {
     this.mutationObserver?.disconnect();
-    disconnectFloatingUI(this, this.referenceEl, this.floatingEl);
     this.resizeObserver?.disconnect();
+    disconnectInteractive(this);
+    disconnectFloatingUI(this, this.referenceEl, this.floatingEl);
     disconnectOpenCloseComponent(this);
   }
 

packages/calcite-components/src/components/fab/fab.tsx

@@ -1,6 +1,11 @@
 import { Component, Element, h, Method, Prop, VNode } from "@stencil/core";
 import { focusElement } from "../../utils/dom";
-import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive";
+import {
+  connectInteractive,
+  disconnectInteractive,
+  InteractiveComponent,
+  updateHostInteraction
+} from "../../utils/interactive";
 import {
   componentLoaded,
   LoadableComponent,
@@ -89,6 +94,10 @@ export class Fab implements InteractiveComponent, LoadableComponent {
   //
   //--------------------------------------------------------------------------
 
+  connectedCallback(): void {
+    connectInteractive(this);
+  }
+
   componentWillLoad(): void {
     setUpLoadableComponent(this);
   }
@@ -101,6 +110,10 @@ export class Fab implements InteractiveComponent, LoadableComponent {
     updateHostInteraction(this);
   }
 
+  disconnectedCallback(): void {
+    disconnectInteractive(this);
+  }
+
   // --------------------------------------------------------------------------
   //
   //  Methods

packages/calcite-components/src/components/filter/filter.tsx

@@ -13,7 +13,12 @@ import {
 } from "@stencil/core";
 import { debounce } from "lodash-es";
 import { filter } from "../../utils/filter";
-import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive";
+import {
+  connectInteractive,
+  disconnectInteractive,
+  InteractiveComponent,
+  updateHostInteraction
+} from "../../utils/interactive";
 import {
   componentLoaded,
   LoadableComponent,
@@ -158,6 +163,7 @@ export class Filter
   }
 
   connectedCallback(): void {
+    connectInteractive(this);
     connectLocalized(this);
     connectMessages(this);
   }
@@ -167,6 +173,7 @@ export class Filter
   }
 
   disconnectedCallback(): void {
+    disconnectInteractive(this);
     disconnectLocalized(this);
     disconnectMessages(this);
   }