{"record":{"id":"392ef16f2ae0419a","repo":"mantinedev/mantine","slug":"mantine-hooks-use-focus-trap-failed-to-find-foc","errorCode":null,"errorMessage":"[@mantine/hooks/use-focus-trap] Failed to find focusable element within provided node","messagePattern":"\\[@mantine/hooks/use-focus-trap\\] Failed to find focusable element within provided node","errorType":"console","errorClass":null,"httpStatus":null,"severity":"warning","filePath":"packages/@mantine/hooks/src/use-focus-trap/use-focus-trap.ts","lineNumber":23,"sourceCode":"export function useFocusTrap(active = true): React.RefCallback<HTMLElement | null> {\n  const ref = useRef<HTMLElement>(null);\n\n  const focusNode = (node: HTMLElement) => {\n    let focusElement: HTMLElement | null = node.querySelector('[data-autofocus]');\n\n    if (!focusElement) {\n      const children = Array.from<HTMLElement>(node.querySelectorAll(FOCUS_SELECTOR));\n      focusElement = children.find(tabbable) || children.find(focusable) || null;\n      if (!focusElement && focusable(node)) {\n        focusElement = node;\n      }\n    }\n\n    if (focusElement) {\n      focusElement.focus({ preventScroll: true });\n    } else if (process.env.NODE_ENV === 'development') {\n      // oxlint-disable-next-line no-console\n      console.warn(\n        '[@mantine/hooks/use-focus-trap] Failed to find focusable element within provided node',\n        node\n      );\n    }\n  };\n\n  const setRef = useCallback(\n    (node: HTMLElement | null) => {\n      if (!active) {\n        return;\n      }\n\n      if (node === null) {\n        ref.current = null;\n        return;\n      }\n\n      if (ref.current === node) {","sourceCodeStart":5,"sourceCodeEnd":41,"githubUrl":"https://github.com/mantinedev/mantine/blob/8a284e2c2c53a9cb6f39f5dc389bf41b7a2073f8/packages/@mantine/hooks/src/use-focus-trap/use-focus-trap.ts#L5-L41","documentation":"A development-only console.warn from useFocusTrap: the trap was activated on a DOM node, but no focusable element was found inside it, so focus could not be assigned. The hook still returns the ref and attaches it; it just could not focus anything. Suppressed in production builds.","triggerScenarios":"useFocusTrap(active = true) ref points to an element containing no focusable children (no button, input, a[href], tabindex element) and the node itself is not focusable. Fires from focusNode, called when the ref callback runs on activation.","commonSituations":"Modal/drawer/popover content that renders only non-interactive text; children rendered asynchronously (loading spinner) so focusables appear after the trap activates; all children disabled or hidden (aria-hidden, display:none); CSS hiding focusables at activation time; incorrect ref attached to a wrapper with purely presentational content.","solutions":["Ensure at least one focusable element exists in the trapped subtree: add a close button, or set tabIndex={-1} on a heading/container to make it programmatically focusable","If content loads async, activate the trap only after content is ready (conditional active prop) or focus a specific element manually","Check for disabled/hidden focusables at activation time (buttons with disabled, elements under display:none are not focusable)","Verify the ref is attached to the container that actually holds the interactive content"],"exampleFix":"// before\nconst focusTrapRef = useFocusTrap(true);\nreturn <div ref={focusTrapRef}><p>No interactive elements here</p></div>;\n\n// after\nconst focusTrapRef = useFocusTrap(true);\nreturn (\n  <div ref={focusTrapRef}>\n    <h2 tabIndex={-1}>Dialog title</h2>\n    <button onClick={close}>Close</button>\n  </div>\n);","handlingStrategy":"validation","validationCode":"const FOCUSABLE = 'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])';\n\nfunction hasFocusableElement(node: HTMLElement | null): boolean {\n  return !!node && node.querySelectorAll(FOCUSABLE).length > 0;\n}","typeGuard":"const isFocusable = (el: Element): boolean =>\n  el instanceof HTMLElement &&\n  !el.hasAttribute('disabled') &&\n  (['BUTTON','INPUT','SELECT','TEXTAREA','A'].includes(el.tagName) || el.tabIndex >= 0) &&\n  el.offsetParent !== null;","tryCatchPattern":"// Development-only warning, no throw; guard by checking content before activating:\nconst ref = useFocusTrap(hasFocusableElement(containerRef.current));","preventionTips":["Always include at least one focusable element (close button or tabIndex={-1} heading) inside trapped content","Activate the trap only after async content has rendered","Remember disabled or display:none elements are not focusable","This warning appears only in development — reproduce locally with NODE_ENV=development"],"tags":["focus-trap","accessibility","a11y","modal","development-only"],"backgroundTag":"focus-trap-no-focusable-element","analyzedSha":"8a284e2c2c53a9cb6f39f5dc389bf41b7a2073f8","analyzedAt":"2026-08-28T10:25:51.087Z","schemaVersion":2},"datasetVersion":"2026-08-28T11:17:15.048Z"}