Feature to scroll the viewport to display the menu #632
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
If a select box was activated near the bottom of the viewport, the viewport will now shift the minimum amount to display the full contents of the menu.
|
Looks good @azaharakis but I think it would be best if we make this optional, and enable the behaviour with a prop, maybe |
as well as adding the feature to the README
|
Thanks @azaharakis! |
JedWatson
added a commit
that referenced
this pull request
Dec 10, 2015
Feature to scroll the viewport to display the menu
|
This is a really handy feature, however it doesn't seem to work when the select element is inside a scrolling container within the page. Something like: |
|
The auto scroll could be a solution but as I mentioned in the issue I created using a library like tether is probably better choice as it makes sure the drop down menu is always shown in the correct place |
# for free
to join this conversation on GitHub.
Already have an account?
# to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Our project required the menu of an enabled dropdown to always be in view when the menu is activated. This PR introduces this feature. The viewport will only be shifted if the menu isn't in focus.
We discussed different implementations such as the dropdown menu displaying above the select box. This implementation required the least amount of change to the code.
The implementation also uses a prop to calculate how much space to place below the menu and the viewport base. We discussed whether or not this should be calculated dynamically from css rather then a prop (incorporating any margin-bottom thats applied to .Select-menu) as this is arguably a styling concern but this semantically might not make sense as margins don't apply to elements taken out of document flow.
If you are interested in this feature but would like some changes please let us know!