From 8f481d3f13adc37def219b8b90a5f640771a8488 Mon Sep 17 00:00:00 2001
From: JC Franco <jfranco@esri.com>
Date: Tue, 18 Feb 2025 15:55:16 -0800
Subject: [PATCH 1/2] fix(dialog, modal, popover, sheet): restore
 focusTrapDisabled reactiveness

---
 .../src/controllers/useFocusTrap.ts           | 26 ++++++++++++-------
 1 file changed, 17 insertions(+), 9 deletions(-)

diff --git a/packages/calcite-components/src/controllers/useFocusTrap.ts b/packages/calcite-components/src/controllers/useFocusTrap.ts
index c47b52554b3..c6c6725c9d4 100644
--- a/packages/calcite-components/src/controllers/useFocusTrap.ts
+++ b/packages/calcite-components/src/controllers/useFocusTrap.ts
@@ -6,17 +6,13 @@ import { createFocusTrapOptions } from "../utils/focusTrapComponent";
 export interface UseFocusTrap {
   /**
    * Activates the focus trap.
-   *
-   * @see https://github.com/focus-trap/focus-trap#trapactivate
    */
-  activate: (options?: Parameters<FocusTrap["activate"]>[0]) => void;
+  activate: () => void;
 
   /**
    * Deactivates the focus trap.
-   *
-   * @see https://github.com/focus-trap/focus-trap#trapdeactivate
    */
-  deactivate: (options?: Parameters<FocusTrap["deactivate"]>[0]) => void;
+  deactivate: () => void;
 
   /**
    * By default, the host element will be used as the focus-trap element, but if the focus-trap element needs to be a different element, use this method prior to activating to set the focus-trap element.
@@ -110,13 +106,23 @@ export const useFocusTrap = <T extends FocusTrapComponent>(
 
     controller.onConnected(() => {
       if (component[options.triggerProp] && focusTrap) {
-        focusTrap.activate();
+        utils.activate();
       }
     });
 
-    controller.onDisconnected(() => focusTrap?.deactivate());
+    controller.onUpdate((changes) => {
+      if (changes.has("focusTrapDisabled")) {
+        if (component.focusTrapDisabled) {
+          utils.deactivate();
+        } else {
+          utils.activate();
+        }
+      }
+    });
+
+    controller.onDisconnected(() => utils.deactivate());
 
-    return {
+    const utils: UseFocusTrap = {
       activate: () => {
         const targetEl = focusTrapEl || component.el;
 
@@ -158,5 +164,7 @@ export const useFocusTrap = <T extends FocusTrapComponent>(
         return focusTrap?.updateContainerElements(effectiveContainers);
       },
     };
+
+    return utils;
   });
 };

From 124d3541c3920414920ab34f0c0756c26288d02a Mon Sep 17 00:00:00 2001
From: JC Franco <jfranco@esri.com>
Date: Tue, 18 Feb 2025 16:34:41 -0800
Subject: [PATCH 2/2] react to focusTrapDisabled after initialization

---
 packages/calcite-components/src/controllers/useFocusTrap.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/calcite-components/src/controllers/useFocusTrap.ts b/packages/calcite-components/src/controllers/useFocusTrap.ts
index c6c6725c9d4..520ab1dce6a 100644
--- a/packages/calcite-components/src/controllers/useFocusTrap.ts
+++ b/packages/calcite-components/src/controllers/useFocusTrap.ts
@@ -111,7 +111,7 @@ export const useFocusTrap = <T extends FocusTrapComponent>(
     });
 
     controller.onUpdate((changes) => {
-      if (changes.has("focusTrapDisabled")) {
+      if (component.hasUpdated && changes.has("focusTrapDisabled")) {
         if (component.focusTrapDisabled) {
           utils.deactivate();
         } else {