JedWatson/react-select · error · Error

Invalid placement provided "${preferredPlacement}".

Error message

Invalid placement provided "${preferredPlacement}".

What it means

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.

Source

Thrown at packages/react-select/src/components/Menu.tsx:215

            : scrollSpaceAbove - marginTop;
        }

        if (shouldScroll) {
          animatedScrollTo(scrollParent, scrollUp, scrollDuration);
        }

        return {
          placement: 'top',
          maxHeight: constrainedHeight,
        };
      }

      // 4. not enough space, the browser WILL NOT increase scrollable area when
      // absolutely positioned element rendered above the viewport (only below).
      // Flip the menu, render below
      return { placement: 'bottom', maxHeight: preferredMaxHeight };
    default:
      throw new Error(`Invalid placement provided "${preferredPlacement}".`);
  }

  return defaultState;
}

// Menu Component
// ------------------------------

export interface MenuPlacementProps {
  /** Set the minimum height of the menu. */
  minMenuHeight: number;
  /** Set the maximum height of the menu. */
  maxMenuHeight: number;
  /** Set whether the menu should be at the top, at the bottom. The auto options sets it to bottom. */
  menuPlacement: MenuPlacement;
  /** The CSS position value of the menu, when "fixed" extra layout management is required */
  menuPosition: MenuPosition;
  /** Set whether the page should scroll to show the menu. */

View on GitHub (pinned to 4b69480786)

Solutions

1. Use one of the three valid values for menuPlacement: 'auto', 'bottom', or 'top' (case-sensitive, lowercase).
2. 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.
3. 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.
4. In TypeScript, type the prop as MenuPlacement ('auto' | 'bottom' | 'top') so invalid values fail at compile time.
5. Check for version mismatches in react-select wrappers/forks that may pass extra placement values not supported by getMenuPlacement.

Example fix

// before
<Select menuPlacement={placement} /> // placement = 'Above' from user config

// after
const VALID = ['auto', 'bottom', 'top'];
const safePlacement = VALID.includes(placement?.toLowerCase())
  ? placement.toLowerCase()
  : 'auto';
<Select menuPlacement={safePlacement} />

const VALID_PLACEMENTS = ['auto', 'bottom', 'top'];
function isValidPlacement(p) {
  return typeof p === 'string' && VALID_PLACEMENTS.includes(p);
}
// before rendering:
const menuPlacement = isValidPlacement(preferredPlacement) ? preferredPlacement : 'auto';

type MenuPlacement = 'auto' | 'bottom' | 'top';
function isMenuPlacement(v: unknown): v is MenuPlacement {
  return v === 'auto' || v === 'bottom' || v === 'top';
}

try {
  renderSelect({ menuPlacement });
} catch (e) {
  if (e instanceof Error && e.message.startsWith('Invalid placement provided')) {
    renderSelect({ menuPlacement: 'auto' });
  } else {
    throw e;
  }
}

When it happens

Trigger: 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.

Common situations: 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.

AI-assisted analysis of JedWatson/react-select@4b69480786 (2026-08-29). Data as JSON: /api/errors/a387db0e8a3e0e9c. Report an issue: GitHub.