{"record":{"id":"cd829b06fbb71812","repo":"actualbudget/actual","slug":"initialfocus-expects-a-single-valid-react-element","errorCode":null,"errorMessage":"InitialFocus expects a single valid React element as its child.","messagePattern":"InitialFocus expects a single valid React element as its child\\.","errorType":"exception","errorClass":null,"httpStatus":null,"severity":"error","filePath":"packages/component-library/src/InitialFocus.ts","lineNumber":60,"sourceCode":"            ref.current instanceof HTMLInputElement ||\n            ref.current instanceof HTMLTextAreaElement\n          ) {\n            ref.current.setSelectionRange(0, 10000);\n          }\n        }\n      }, 0);\n    }\n  }, []);\n\n  if (typeof children === 'function') {\n    return children(ref);\n  }\n\n  const child = Children.only(children);\n  if (isValidElement(child)) {\n    return cloneElement(child, { ref });\n  }\n  throw new Error(\n    'InitialFocus expects a single valid React element as its child.',\n  );\n}\n","sourceCodeStart":42,"sourceCodeEnd":64,"githubUrl":"https://github.com/actualbudget/actual/blob/d4334cb6e6123f4d3bcea1ad6166608884c7e658/packages/component-library/src/InitialFocus.ts#L42-L64","documentation":"InitialFocus is a React wrapper that clones its single child and attaches a ref so the element receives focus on mount. It uses Children.only, so it throws if children is not exactly one valid React element.","triggerScenarios":"Rendering <InitialFocus> with zero children, multiple children, a string, a fragment of multiple elements, or a conditional returning null/false.","commonSituations":"Adding a second input inside InitialFocus during refactoring; JSX like <InitialFocus>{condition && <Input/>}</InitialFocus> where condition is false; passing text content instead of an element.","solutions":["Ensure InitialFocus has exactly one element child.","Wrap multiple children in a single element and put InitialFocus around the element that should receive focus.","Move conditional rendering outside so a valid element is always passed, or conditionally render InitialFocus itself."],"exampleFix":"// before\n<InitialFocus>{cond && <Input />}</InitialFocus>\n// after\n{cond && <InitialFocus><Input /></InitialFocus>}","handlingStrategy":"validation","validationCode":"import { Children, isValidElement } from 'react';\nconst child = Children.only(children);\nif (!isValidElement(child)) {\n  throw new Error('InitialFocus requires exactly one valid element child');\n}","typeGuard":"import { Children, isValidElement, type ReactElement } from 'react';\nfunction isSingleElement(children: React.ReactNode): children is ReactElement {\n  const child = Children.only(children);\n  return isValidElement(child);\n}","tryCatchPattern":"try {\n  return <InitialFocus>{child}</InitialFocus>;\n} catch (err) {\n  console.error('InitialFocus misuse:', (err as Error).message);\n  return child;\n}","preventionTips":["Always give InitialFocus exactly one element child.","Never place conditional expressions ({cond && <Input/>}) directly inside InitialFocus.","Focus the wrapper on the specific input that needs autofocus, not a container.","Add a unit test rendering each usage of InitialFocus to catch refactors adding children."],"tags":["react","component-api","validation"],"backgroundTag":"invalid-children-single-element","analyzedSha":"d4334cb6e6123f4d3bcea1ad6166608884c7e658","analyzedAt":"2026-08-29T01:02:11.213Z","schemaVersion":2},"datasetVersion":"2026-08-29T02:17:18.158Z"}