Skip to content

Add support for menuScrollIntoViewElement #3531

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

Closed
wants to merge 1 commit into from
Closed

Add support for menuScrollIntoViewElement #3531

wants to merge 1 commit into from

Conversation

skovhus
Copy link

@skovhus skovhus commented Apr 29, 2019

Current behavior

Currently, react-select tries to find the appropriate element to scroll by traversing parents and finding a parent with overflow=scroll / auto and defaults to the root document. See

react-select/src/utils.js

Lines 127 to 143 in 292bad3

export function getScrollParent(element: ElementRef<*>): Element {
let style = getComputedStyle(element);
const excludeStaticParent = style.position === 'absolute';
const overflowRx = /(auto|scroll)/;
const docEl = ((document.documentElement: any): Element); // suck it, flow...
if (style.position === 'fixed') return docEl;
for (let parent = element; (parent = parent.parentElement); ) {
style = getComputedStyle(parent);
if (excludeStaticParent && style.position === 'static') {
continue;
}
if (overflowRx.test(style.overflow + style.overflowY + style.overflowX)) {
return parent;
}
}

This doesn't work a react-select element is positioned inside a static positioned parent (example using CSS Grid).

Suggestion

This PR adds a new menuScrollIntoViewElement to support this custom behavior. You can try this PR out here: https://codepen.io/skovhus/pen/JVVGdO

It does not solve all use cases, as there is still code that checks for available view height on window (viewSpaceBelow >= menuHeight), and not inside the container. Here menuScrollIntoViewElement does not have any effect (yet). Demo https://codepen.io/skovhus/pen/LvvNJE

Related issues

#810

TODO

  • proposal
  • get feedback from maintainers
  • see if I can add some unit tests
  • more documentation

Useful when react-select is positioned inside static positioned containers, but you still want the scroll into view behaviour.
@skovhus
Copy link
Author

skovhus commented Oct 11, 2019

@JedWatson are you interested in this suggestion for v3? In that case, I can update this PR for version 3.

@prateekgarcha
Copy link

prateekgarcha commented Oct 17, 2019

@skovhus @JedWatson, regarding this line,

It does not solve all use cases, as there is still code that checks for available view height on window (viewSpaceBelow >= menuHeight), and not inside the container. Here menuScrollIntoViewElement does not have any effect (yet). Demo https://codepen.io/skovhus/pen/LvvNJE

Is there any update on adding the functionality of checking the height of the container instead of the window? I'm facing an issue because of this and can only bypass it using some kind of hack by overriding the componentDidUpdate of Select and then changing the menu's top and bottom accordingly if it doesn't fit inside the container.

@charrondev
Copy link

Just because it wasn't cross-linked over: #3830

@bladey bladey added pr/needs-review PRs that need to be reviewed to determine outcome enhancement and removed uncertain labels Jun 4, 2020
@bladey bladey added pr/enhancement PRs that are specifically enhancing the project and removed category/enhancement labels Jun 24, 2020
@ebonow ebonow added the menu-bug Addresses menu positioning, scrolling, or general interactions label Jan 16, 2021
@laukstein
Copy link

Why this isn't still released? It is blocking menuPosition="fixed" support when scrolled parent element (the dropdown gets dislocated).

@ebonow
Copy link
Collaborator

ebonow commented Apr 21, 2021

@laukstein and everyone else, sorry for the long wait on this.

Currently version 5 is being finalized to replace Flow with TypeScript, so we had to put PR's on hold to avoid further merge conflicts. This and other PR's will be revisited in the coming weeks. Please hold tight.

@ghost ghost closed this by deleting the head repository Jan 23, 2023
This pull request was closed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
menu-bug Addresses menu positioning, scrolling, or general interactions pr/enhancement PRs that are specifically enhancing the project pr/needs-review PRs that need to be reviewed to determine outcome
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants