{"record":{"id":"b69c693464569712","repo":"mantinedev/mantine","slug":"mantine-hooks-use-focus-trap-ref-node-is-not-pa","errorCode":null,"errorMessage":"[@mantine/hooks/use-focus-trap] Ref node is not part of the dom","messagePattern":"\\[@mantine/hooks/use-focus-trap\\] Ref node is not part of the dom","errorType":"console","errorClass":null,"httpStatus":null,"severity":"warning","filePath":"packages/@mantine/hooks/src/use-focus-trap/use-focus-trap.ts","lineNumber":51,"sourceCode":"        return;\n      }\n\n      if (node === null) {\n        ref.current = null;\n        return;\n      }\n\n      if (ref.current === node) {\n        return;\n      }\n\n      // Delay processing the HTML node by a frame. This ensures focus is assigned correctly.\n      setTimeout(() => {\n        if (node.getRootNode()) {\n          focusNode(node);\n        } else if (process.env.NODE_ENV === 'development') {\n          // oxlint-disable-next-line no-console\n          console.warn('[@mantine/hooks/use-focus-trap] Ref node is not part of the dom', node);\n        }\n      });\n\n      ref.current = node;\n    },\n    [active]\n  );\n\n  useEffect(() => {\n    if (!active) {\n      return undefined;\n    }\n\n    if (ref.current) {\n      setTimeout(() => {\n        if (ref.current) {\n          focusNode(ref.current);\n        }","sourceCodeStart":33,"sourceCodeEnd":69,"githubUrl":"https://github.com/mantinedev/mantine/blob/8a284e2c2c53a9cb6f39f5dc389bf41b7a2073f8/packages/@mantine/hooks/src/use-focus-trap/use-focus-trap.ts#L33-L69","documentation":"A development-only console.warn from useFocusTrap: the element assigned to the trap ref has no root node (node.getRootNode() is falsy), meaning it is detached from the DOM. The trap skips focusing and warns. It runs inside a setTimeout to let React attach nodes, so it fires a frame after activation.","triggerScenarios":"The ref callback receives a node that is not connected to the document — element created but never mounted, unmounted before the timeout runs, or rendered into a detached container. Happens when the component using useFocusTrap unmounts immediately, or when the ref node lives in a fragment/container removed within the same tick.","commonSituations":"Modal/drawer component that mounts and immediately unmounts (animation libraries removing nodes, conditional rendering flicker); refs on elements inside portals created into detached containers; StrictMode double-mount/unmount cycles in development; race conditions where active toggles true then false quickly.","solutions":["Check for mount/unmount races: ensure the component holding the trap stays mounted while active is true","If using StrictMode, note the double-invoke in development can trigger this transiently — verify it does not occur in production behavior","Ensure portal containers are attached to document.body before rendering trapped content","Delay activation (active prop) until the container element is confirmed in the DOM"],"exampleFix":"// before\nconst focusTrapRef = useFocusTrap(true);\n// component unmounts/remounts rapidly -> detached node\nreturn mounted && <div ref={focusTrapRef}>...</div>;\n\n// after\nconst focusTrapRef = useFocusTrap(mounted && contentReady);\nreturn mounted ? <div ref={focusTrapRef}>...</div> : null;","handlingStrategy":"validation","validationCode":"function isNodeInDocument(node: HTMLElement | null): boolean {\n  return !!node && node.isConnected && !!node.getRootNode();\n}\n\n// before activating the trap\nconst active = isNodeInDocument(containerRef.current);","typeGuard":"const isAttachedNode = (node: HTMLElement | null): node is HTMLElement =>\n  node !== null && node.isConnected;","tryCatchPattern":"// No throw occurs; the hook warns and skips focus. Guard lifecycle instead:\nuseEffect(() => {\n  if (containerRef.current?.isConnected) setActive(true);\n}, []);","preventionTips":["Ensure the component holding the trap ref stays mounted while the trap is active","Attach portal containers to document.body before rendering trapped content","Beware rapid mount/unmount from animation libraries and conditional rendering","Expect transient occurrences under React StrictMode in development; verify production behavior"],"tags":["focus-trap","dom","react-lifecycle","development-only"],"backgroundTag":"focus-trap-detached-node","analyzedSha":"8a284e2c2c53a9cb6f39f5dc389bf41b7a2073f8","analyzedAt":"2026-08-28T10:25:51.087Z","schemaVersion":2},"datasetVersion":"2026-08-28T11:17:15.048Z"}