{"record":{"id":"5f8cef702b7d0b20","repo":"mui/material-ui","slug":"mui-rovingtabindexcontext-is-missing-roving-tab","errorCode":null,"errorMessage":"MUI: RovingTabIndexContext is missing. Roving tab index items must be placed within a roving tab index provider.","messagePattern":"MUI: RovingTabIndexContext is missing\\. Roving tab index items must be placed within a roving tab index provider\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/mui-utils/src/useRovingTabIndex/RovingTabIndexContext.tsx","lineNumber":19,"sourceCode":"'use client';\nimport * as React from 'react';\nimport type { UseRovingTabIndexReturnValue } from './useRovingTabIndex';\n\ntype RovingTabIndexContextValue = UseRovingTabIndexReturnValue<unknown>;\n\nexport const RovingTabIndexContext = React.createContext<RovingTabIndexContextValue | undefined>(\n  undefined,\n);\n\nif (process.env.NODE_ENV !== 'production') {\n  RovingTabIndexContext.displayName = 'RovingTabIndexContext';\n}\n\nexport function useRovingTabIndexContext() {\n  const context = React.useContext(RovingTabIndexContext);\n\n  if (context === undefined) {\n    throw new Error(\n      'MUI: RovingTabIndexContext is missing. Roving tab index items must be placed within a roving tab index provider.',\n    );\n  }\n\n  return context;\n}\n","sourceCodeStart":1,"sourceCodeEnd":26,"githubUrl":"https://github.com/mui/material-ui/blob/bdc96df2cb530fcdd60a7a7aabe37f610ce0f0a5/packages/mui-utils/src/useRovingTabIndex/RovingTabIndexContext.tsx#L1-L26","documentation":"RovingTabIndexContext (in @mui/utils useRovingTabIndex) is provided by a roving-tab-index root (e.g. Menu/MenuList in MUI) and consumed by items that participate in arrow-key navigation. useRovingTabIndexContext throws when the value is undefined, meaning the calling item is not inside a roving-tab-index provider. The pattern (roving tabindex) requires a coordinator root to track which item is tabbable.","triggerScenarios":"Rendering a component that calls useRovingTabIndex/useRovingTabIndexContext outside of a roving tab index root (e.g. a ListItem or custom focusable item without the provider); portalling such an item out of the rooted subtree.","commonSituations":"Building a custom toolbar/menu with roving-tabindex items but forgetting the root hook/provider; refactoring that detaches an item from the rooted list.","solutions":["Render the item within a subtree that provides RovingTabIndexContext (typically by using the MUI Menu/MenuList or a component that wires useRovingTabIndex at its root).","If building a custom composite widget, call useRovingTabIndex at the root and wrap children in RovingTabIndexContext.Provider.","Avoid portalling focusable items out of the rooted composite."],"exampleFix":"// before — item rendered without a roving-tabindex root\n<CustomItem />\n// after — wrap in a root that provides the context (e.g. MenuList)\n<MenuList>\n  <CustomItem />\n</MenuList>","handlingStrategy":"validation","validationCode":"// Structural guard: ensure the consuming item is rendered inside a component that provides RovingTabIndexContext.\n// In user code this means: only use roving-tabindex items within <Menu>/<MenuList>/<Select> or a custom root that calls useRovingTabIndex and wraps children in <RovingTabIndexContext.Provider>.","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Render roving-tabindex items only inside a rooted composite (Menu, MenuList, or a custom provider).","When building a custom composite, set up useRovingTabIndex at the root and provide RovingTabIndexContext to descendants.","Do not portal focusable items out of the rooted subtree."],"tags":["react","utils","a11y","context","misuse","roving-tabindex"],"backgroundTag":null,"analyzedSha":"bdc96df2cb530fcdd60a7a7aabe37f610ce0f0a5","analyzedAt":"2026-08-12T22:59:56.717Z","schemaVersion":2},"datasetVersion":"2026-08-12T23:17:12.415Z"}