{"record":{"id":"a387db0e8a3e0e9c","repo":"JedWatson/react-select","slug":"invalid-placement-provided-preferredplacement","errorCode":null,"errorMessage":"Invalid placement provided \"${preferredPlacement}\".","messagePattern":"Invalid placement provided \"(.+?)\"\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/react-select/src/components/Menu.tsx","lineNumber":215,"sourceCode":"            : scrollSpaceAbove - marginTop;\n        }\n\n        if (shouldScroll) {\n          animatedScrollTo(scrollParent, scrollUp, scrollDuration);\n        }\n\n        return {\n          placement: 'top',\n          maxHeight: constrainedHeight,\n        };\n      }\n\n      // 4. not enough space, the browser WILL NOT increase scrollable area when\n      // absolutely positioned element rendered above the viewport (only below).\n      // Flip the menu, render below\n      return { placement: 'bottom', maxHeight: preferredMaxHeight };\n    default:\n      throw new Error(`Invalid placement provided \"${preferredPlacement}\".`);\n  }\n\n  return defaultState;\n}\n\n// Menu Component\n// ------------------------------\n\nexport interface MenuPlacementProps {\n  /** Set the minimum height of the menu. */\n  minMenuHeight: number;\n  /** Set the maximum height of the menu. */\n  maxMenuHeight: number;\n  /** Set whether the menu should be at the top, at the bottom. The auto options sets it to bottom. */\n  menuPlacement: MenuPlacement;\n  /** The CSS position value of the menu, when \"fixed\" extra layout management is required */\n  menuPosition: MenuPosition;\n  /** Set whether the page should scroll to show the menu. */","sourceCodeStart":197,"sourceCodeEnd":233,"githubUrl":"https://github.com/JedWatson/react-select/blob/4b6948078684bee394e09dd8e7cdc2d7f89e0fad/packages/react-select/src/components/Menu.tsx#L197-L233","documentation":"getMenuPlacement computes where the react-select menu should render ('top', 'bottom', or derived from 'auto') based on available viewport/scroll space. The switch only handles 'auto', 'bottom', and 'top'; anything else hits the default branch and throws. This guards against an invalid menuPlacement prop value being passed to a Select component.","triggerScenarios":"Passing a menuPlacement prop with a value other than 'auto', 'bottom', or 'top' (e.g. menuPlacement=\"above\", menuPlacement=\"Top\", a misspelled value, a dynamic variable that is undefined or a non-string value like a number/boolean) to react-select's Select component.","commonSituations":"Typos in the menuPlacement prop; building a wrapper around Select that forwards a user-supplied placement string without validating it; reading the placement from config/CSS/URL params; TypeScript projects using a loosely-typed prop (string instead of 'auto' | 'bottom' | 'top') or older JS codebases without type checking.","solutions":["Use one of the three valid values for menuPlacement: 'auto', 'bottom', or 'top' (case-sensitive, lowercase).","Log/inspect the actual value being passed; if it is computed dynamically, ensure it resolves to one of the valid strings and is not undefined/null.","If the placement comes from user input or config, normalize it (e.g. value?.toLowerCase()) and fall back to 'auto' when it doesn't match a valid option.","In TypeScript, type the prop as MenuPlacement ('auto' | 'bottom' | 'top') so invalid values fail at compile time.","Check for version mismatches in react-select wrappers/forks that may pass extra placement values not supported by getMenuPlacement."],"exampleFix":"// before\n<Select menuPlacement={placement} /> // placement = 'Above' from user config\n\n// after\nconst VALID = ['auto', 'bottom', 'top'];\nconst safePlacement = VALID.includes(placement?.toLowerCase())\n  ? placement.toLowerCase()\n  : 'auto';\n<Select menuPlacement={safePlacement} />","handlingStrategy":"validation","validationCode":"const VALID_PLACEMENTS = ['auto', 'bottom', 'top'];\nfunction isValidPlacement(p) {\n  return typeof p === 'string' && VALID_PLACEMENTS.includes(p);\n}\n// before rendering:\nconst menuPlacement = isValidPlacement(preferredPlacement) ? preferredPlacement : 'auto';","typeGuard":"type MenuPlacement = 'auto' | 'bottom' | 'top';\nfunction isMenuPlacement(v: unknown): v is MenuPlacement {\n  return v === 'auto' || v === 'bottom' || v === 'top';\n}","tryCatchPattern":"try {\n  renderSelect({ menuPlacement });\n} catch (e) {\n  if (e instanceof Error && e.message.startsWith('Invalid placement provided')) {\n    renderSelect({ menuPlacement: 'auto' });\n  } else {\n    throw e;\n  }\n}","preventionTips":["Always use the exported MenuPlacement type ('auto' | 'bottom' | 'top') for the menuPlacement prop instead of plain string.","Never pass user- or config-supplied strings directly to menuPlacement without validating/normalizing them first.","Default to 'auto' when the placement is unknown rather than forwarding undefined/null.","Add a unit test asserting your wrapper component rejects or coerces invalid placement values.","Keep prop values lowercase and exact; the check is case-sensitive so 'Bottom' or 'TOP' will throw."],"tags":["react-select","menu-placement","invalid-prop","runtime-error"],"backgroundTag":"invalid-prop-value","analyzedSha":"4b6948078684bee394e09dd8e7cdc2d7f89e0fad","analyzedAt":"2026-08-29T00:47:46.016Z","schemaVersion":2},"datasetVersion":"2026-08-29T02:17:18.158Z"}