-
Notifications
You must be signed in to change notification settings - Fork 4.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Expand and scroll container when opening menu #3669
Conversation
If the parent scroll container is not tall enough to contain the menu, constrain the height of the menu so that it fits inside the container.
The older version of cypress does not work correctly in watch mode with newer versions of chrome.
There weren’t any tests specifically around the menu, so this adds a second group of tests specifically for them, as well as a new script command for `e2e-watch`.
Here's the message from CI for the e2e failure. Any help in fixing this would be appreciated!
|
If anyone wants to try this out, you can use this commit from our fork, which includes the generated files: nutshellcrm@c231943 |
If there's a chance this could get merged in, I can spend some time rebasing and getting it ready. Let me know if y'all will have time to review at some point. |
@IanVS Thanks for circling back on this. We'll be exploring some long overdue menu positioning behavior fixes following the release of the TypeScript refactor. Either way, it's frustrating that the PR review process is so far behind, but hoping we can make more headway once we've got v5 settled. |
@IanVS Hey, we're finally circling back to this. We apologize it took so long to get to this after the work you've put into it. Right now we're planning to use Popper for menu positioning. The changes you've made to the positioning logic are great, however there are a few things I would like to tweak about it. Given that we're switching to Popper anyway, would you be willing to scale back this PR or create a new PR to just include the new Cypress tests (they can be |
@IanVS Also, if you don't have time to work on this at the moment, no worries. I've started #4913 which is inspired by the Cypress tests added in this PR. I can incorporate your tests into that PR and close out this PR if that's easier, but if you want credit for it I'd be happy to review/merge this PR with just the tests when it's ready. |
Hi, thanks for the consideration, but it if you're able to take what I started here and run with it, I'm more than happy with that. I'm stretched a bit thin, and not using react-select at the moment. I'm glad that the PR was useful, even if only as a guide or starting point. Feel free to copy whatever's useful and close this PR. Best of luck with everything! |
Fixes #3473
Fixes #1267
This PR does three main things:
Fixes the above-mentioned issues by correctly identifying and using the height of a scroll parent when the select component is inside one. This means that the menu will no longer be only partially visible and force the user to scroll the parent in order to see the rest.
Allows the menu to be sized a bit smaller in cases where it can fit inside the scroll parent without causing the scroll parent to grow. This is preferable to expanding the scroll parent and causing the select component to jump to a new position, caused by the open menu.
Updates cypress to the latest version (I was having a hard time getting the existing version to run correctly in newer versions of chrome), and adds a new e2e test file for menus.