Skip to content

Conversation

@csandman
Copy link
Owner

@csandman csandman commented Jan 9, 2026

This PR implements a change I've been meaning to make for a while. The menuPlacement prop determines where the select menu is placed depending on available screen space:

menuPlacement

Default placement of the menu in relation to the control. 'auto' will flip when there isn't enough space below the control.

One of<
  "bottom",
  "auto",
  "top"
>

https://react-select.com/props#:~:text=menuPlacement

By default, the menu will always stay on the bottom (essentially meaning the prop defaults to "bottom"). However, the default behavior for the Chakra menus and popovers is to flip to the top if there isn't enough vertical space.

image image

So I finally decided to make the executive decision to default this prop to "auto" to reflect that behavior, after having set it manually in so many of my own projects. This is actually already the case in chakra-react-select@6, but I wanted to update v5 to match. Here's what the behavior looks like:

Screen.Recording.2026-01-09.at.5.21.33.PM.mov

It is always possible to go back to the default behavior of react-select by passing the prop menuPlacement="bottom", so this isn't really a breaking change.

@bolt-new-by-stackblitz
Copy link

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

@github-actions
Copy link

github-actions bot commented Jan 9, 2026

📊 Package size report   0.3%↑

File Before After
dist/index.js 32.5 kB 0.7%↑32.8 kB
dist/index.mjs 30.9 kB 0.7%↑31.2 kB
Total (Includes all files) 155.1 kB 0.3%↑155.5 kB
Tarball size 31.1 kB 0.5%↑31.2 kB
Unchanged files
File Size
dist/index.d.mts 20.0 kB
dist/index.d.ts 20.0 kB
LICENSE.md 1.1 kB
package.json 3.1 kB
README.md 47.5 kB

🤖 This report was automatically generated by pkg-size-action

// Match the default flipping behavior of the Chakra Menu and Popover components
// by automatically placing the menu above or below the control based on the available space.
menuPlacement: "auto",
unstyled: true,
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I added this prop also to match v6. I don't believe it does anything anyway, because this package uses all custom components, but it could prevent react-select from passing around unused styles. It doesn't hurt in either case.

@csandman csandman merged commit cf2bd53 into v5 Jan 9, 2026
2 checks passed
@csandman csandman deleted the default-menu-placement branch January 9, 2026 22:43
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants