diff --git a/packages/calcite-components/src/controllers/useFocusTrap.ts b/packages/calcite-components/src/controllers/useFocusTrap.ts index c47b52554b3..520ab1dce6a 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[0]) => void; + activate: () => void; /** * Deactivates the focus trap. - * - * @see https://github.com/focus-trap/focus-trap#trapdeactivate */ - deactivate: (options?: Parameters[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 = ( controller.onConnected(() => { if (component[options.triggerProp] && focusTrap) { - focusTrap.activate(); + utils.activate(); } }); - controller.onDisconnected(() => focusTrap?.deactivate()); + controller.onUpdate((changes) => { + if (component.hasUpdated && 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 = ( return focusTrap?.updateContainerElements(effectiveContainers); }, }; + + return utils; }); };