{"record":{"id":"b3a5d6006c07d4eb","repo":"tailwindlabs/headlessui","slug":"there-are-no-focusable-elements-inside-the-focust-b3a5d6","errorCode":null,"errorMessage":"There are no focusable elements inside the <FocusTrap />","messagePattern":"There are no focusable elements inside the <FocusTrap />","errorType":"console","errorClass":null,"httpStatus":null,"severity":"warning","filePath":"packages/@headlessui-react/src/components/focus-trap/focus-trap.tsx","lineNumber":402,"sourceCode":"            return // Worked, bail\n          }\n        }\n\n        // Try to focus the first focusable element.\n        else if (focusIn(containerElement!, Focus.First) !== FocusResult.Error) {\n          return // Worked, bail\n        }\n\n        // Try the fallback\n        if (initialFocusFallback?.current) {\n          focusElement(initialFocusFallback.current)\n          if (ownerDocument?.activeElement === initialFocusFallback.current) {\n            return // Worked, bail\n          }\n        }\n\n        // Nothing worked\n        console.warn('There are no focusable elements inside the <FocusTrap />')\n      }\n\n      previousActiveElement.current = ownerDocument?.activeElement as HTMLElement\n    })\n  }, [initialFocusFallback, enabled, features])\n\n  return previousActiveElement\n}\n\nfunction useFocusLock(\n  features: FocusTrapFeatures,\n  {\n    ownerDocument,\n    container,\n    containers,\n    previousActiveElement,\n  }: {\n    ownerDocument: Document | null","sourceCodeStart":384,"sourceCodeEnd":420,"githubUrl":"https://github.com/tailwindlabs/headlessui/blob/eea57cf46fd6767ed1059012f7073b88eb159fba/packages/@headlessui-react/src/components/focus-trap/focus-trap.tsx#L384-L420","documentation":"This warning is emitted by Headless UI React's <FocusTrap /> (used internally by <Dialog>) during initial focus when it cannot find any focusable element inside the trap container. The useInitialFocus hook tries the `initialFocus` prop/ref, then the container's first focusable element; if every strategy fails it warns and the dialog opens with nothing focused, which breaks keyboard accessibility.","triggerScenarios":"Rendering a <Dialog> whose panel contains no focusable elements (no buttons, inputs, links, or [tabindex] elements) while initialFocus is unset, or passing an initialFocus ref whose current target is null/detached/disabled at mount time. Content that renders empty on first paint (async data) also triggers it.","commonSituations":"Dialogs with only text and a close button rendered conditionally after data loads; initialFocus refs attached to elements inside a v-if/false branch or removed by state changes; elements with `disabled`, `hidden`, `aria-hidden`, or `display:none`; SSR timing issues where the ref isn't populated when the trap activates.","solutions":["Add at least one focusable element inside DialogPanel, e.g. action buttons or a close <button>.","Pass initialFocus pointing to a mounted element: <Dialog initialFocus={cancelRef}> (or initialFocus on FocusTrap).","Ensure the ref target is not null: use a callback/useRef assigned to an element that always renders, and check it isn't disabled or hidden.","If content is async, render the Dialog only when content is ready, or keep a persistent focusable fallback (e.g. tabindex={-1} on the panel wrapper and pass it as initialFocus)."],"exampleFix":"// before\n<Dialog onClose={close}>\n  <DialogPanel>\n    <p>Just text, nothing focusable</p>\n  </DialogPanel>\n</Dialog>\n\n// after\nfunction Example() {\n  const cancelRef = useRef(null)\n  return (\n    <Dialog onClose={close} initialFocus={cancelRef}>\n      <DialogPanel>\n        <p>Are you sure?</p>\n        <button ref={cancelRef} onClick={close}>Cancel</button>\n        <button onClick={confirm}>Confirm</button>\n      </DialogPanel>\n    </Dialog>\n  )\n}","handlingStrategy":"validation","validationCode":"// React: check before opening / at render\nfunction hasFocusable(root: HTMLElement | null): boolean {\n  if (!root) return false\n  return root.querySelector(\n    'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex=\"-1\"])'\n  ) !== null\n}\n// in the component\nconst panelRef = useRef<HTMLDivElement>(null)\nconst open = () => {\n  if (!cancelRef.current && !hasFocusable(panelRef.current)) {\n    panelRef.current?.setAttribute('tabindex', '-1') // fallback focus target\n  }\n  setOpen(true)\n}","typeGuard":"function isFocusable(el: Element | null): el is HTMLElement {\n  if (!el) return false\n  return (\n    !el.hasAttribute('disabled') &&\n    el.getAttribute('aria-hidden') !== 'true' &&\n    (el.matches('a[href],button,input,select,textarea,[tabindex]') ||\n      el.getAttribute('contenteditable') === 'true')\n  )\n}","tryCatchPattern":null,"preventionTips":["Always include at least one focusable control inside DialogPanel.","Guard initialFocus refs: `initialFocus={ref.current ? ref : undefined}` or ensure the element always renders.","Avoid conditionally unmounting the initialFocus target.","Test dialogs with keyboard only (Tab/Esc) in CI or manual QA."],"tags":["headlessui","react","focus-trap","dialog","accessibility","keyboard-navigation"],"backgroundTag":"no-focusable-elements-in-container","analyzedSha":"eea57cf46fd6767ed1059012f7073b88eb159fba","analyzedAt":"2026-08-28T19:22:46.163Z","schemaVersion":2},"datasetVersion":"2026-08-28T21:17:43.275Z"}