react-select: positioning the component in containers that have `overflow: scroll;`

one more use case when dropdown should flow above all elements and should not be restricted by container’s size

Did you try using menuPosition=“fixed” like that: <ReactSelect {...props} menuPosition="fixed" />?

If you are using react 16+ and you’re not willing to add new dependencies to your project (react-tether and react-dimensions), you could use react portals to achieve the same behavior.

import React from 'react'
import ReactDOM from 'react-dom'
import ReactSelect from 'react-select'

export default class Select extends ReactSelect {
    renderOuter(options, valueArray, focusedOption) {
        const dimensions = this.wrapper ? this.wrapper.getBoundingClientRect() : null
        const menu = super.renderMenu(options, valueArray, focusedOption)

        if (!menu || !dimensions) return null

        const maxHeight = document.body.offsetHeight - (dimensions.top + dimensions.height)
        return ReactDOM.createPortal(
            <div
                ref={ref => { this.menuContainer = ref }}
                className="Select-menu-outer"
                onClick={(e) => { e.stopPropagation() }}
                style={{
                    ...this.props.menuContainerStyle,
                    zIndex: 9999,
                    position: 'absolute',
                    width: dimensions.width,
                    top: dimensions.top + dimensions.height,
                    left: dimensions.left,
                    maxHeight: Math.min(maxHeight, 200),
                    overflow: 'hidden'
                }}
            >
                <div
                    ref={ref => { this.menu = ref }}
                    role="listbox"
                    tabIndex={-1}
                    className="Select-menu"
                    id={`${this._instancePrefix}-list`}
                    style={{
                        ...this.props.menuStyle,
                        maxHeight: Math.min(maxHeight, 200)
                    }}
                    onScroll={this.handleMenuScroll}
                    onMouseDown={this.handleMouseDownOnMenu}
                >
                    {menu}
                </div>
            </div>,
            document.body
        )
    }
}

@andreifg1 menuPosition=“fixed” did the trick on v3 👍

I ran into the same problem as @burtyish. (before actually reading his comment) I found a fix that works for the regular react-select (haven’t tested creatable/async) that doesn’t use react-dimensions

import React from 'react';
import Select from 'react-select';
import TetherComponent from 'react-tether';

/** from https://github.com/JedWatson/react-select/issues/810#issuecomment-250274937 **/
export default class TetheredSelectWrap extends Select {

    constructor(props) {
        super(props);

        this.renderOuter = this._renderOuter;
    }

    _renderOuter() {
        const menu = super.renderOuter.apply(this, arguments);

        // Don't return an updated menu render if we don't have one
        if (!menu) {
            return;
        }

        /** this.wrapper comes from the ref of the main Select component (super.render()) **/
        const selectWidth = this.wrapper ? this.wrapper.offsetWidth : null;

        return (
            <TetherComponent
                renderElementTo="body"
                ref="tethered-component"
                attachment="top left"
                targetAttachment="top left"
                constraints={[{
                    to: 'window',
                    attachment: 'together',
                    pin: ['top']
                }]}
            >
                {/* Apply position:static to our menu so that it's parent will get the correct dimensions and we can tether the parent */}
                <div></div>
                {React.cloneElement(menu, {style: {position: 'static', width: selectWidth}})}
            </TetherComponent>
        );
    }

}

Now your component doesn’t need to be the full width, and has one less dependency.

@maxmatthews you can try the following, it worked for me.

1 - Comment out the rule /*top:100px*/ from the original css class .Select-menu-outer 2 - Add the following custom css to your stylesheet:

.menu-outer-top .Select-menu-outer {
    bottom: 35px!important;
    border-bottom-right-radius: 0px!important;
    border-bottom-left-radius: 0px!important;
    border-top-right-radius: 4px!important;
    border-top-left-radius: 4px!important;
}

3 - Add the class .menu-outer-top to the Select to manually change to position of the dropdown (See screenshot below)

                <Select
                  name="form-field-Country"
                  value="one"
                  className="menu-outer-top"
                  placeholder=" Please choose a country"
                  value = {Country.value}
                  clearable = {false}
                  options={this.props.countries}
                  onChange={this.SelecCountryChange}
                  optionComponent={CountryOption}

                  />

Example:

Final results:

Hope it helps!

Really important feature.

There are plenty of situations where you you don’t want the drop-down to cause overflow. Actually, it should be the default behavior, since that’s how the native select box work.

Actually, I was able to shorten this a good bit using react-tether and react-dimensions:

import React from 'react';
import Dimensions from 'react-dimensions';
import Select from 'react-select';
import TetherComponent from 'react-tether';

class TetheredSelectWrap extends Select {
  constructor(props) {
    super(props);

    this.renderOuter = this._renderOuter;
  }

  componentDidMount() {
    super.componentDidMount.call(this);
  }

  _renderOuter() {
    const {containerWidth} = this.props;
    const menu = super.renderOuter.apply(this, arguments);

    // Don't return an updated menu render if we don't have one
    if (!menu) {
      return;
    }

    return (
      <TetherComponent
        renderElementTo="body"
        ref="tethered-component"
        attachment="top left"
        targetAttachment="top left"
        constraints={[{
          to: 'window',
          attachment: 'together',
          pin: ['top']
        }]}
      >
        {/* Apply position:static to our menu so that it's parent will get the correct dimensions and we can tether the parent */}
        <div></div>
        {React.cloneElement(menu, {style: {position: 'static', width: containerWidth}})}
      </TetherComponent>
    );
  }
}

// Call the AsyncCreatable code from react-select with our extended tether class
class TetheredSelect extends React.Component {
  render () {
    return (
      <TetheredSelectWrap.Async {...this.props}>
        {(asyncProps) => (
          <TetheredSelectWrap.Creatable {...this.props}>
            {(creatableProps) => (
              <TetheredSelectWrap
                {...asyncProps}
                {...creatableProps}
                onInputChange={(input) => {
                  creatableProps.onInputChange(input);
                  return asyncProps.onInputChange(input);
                }}
              />
              )}
            </TetheredSelectWrap.Creatable>
            )}
          </TetheredSelectWrap.Async>
    );
  }
}

export default Dimensions()(TetheredSelect);

For v2 solution check #2439

Thanks @oluckyman for the great solution. I’ve modified it a bit to work with react-select:

TetheredSelect component that overrides Select’s menu rendering:

import React from 'react';
import Select from 'react-select';
import ReactDOM from 'react-dom';
import TetherComponent from './TetherComponent';

export default class TetheredSelect extends Select {
    constructor(props) {
        super(props);

        this.renderOuter = this._renderOuter;
    }

    componentDidMount() {
        super.componentDidMount.call(this);

        this.dropdownFieldNode = ReactDOM.findDOMNode(this);
    }

    _renderOuter() {
        const menu = super.renderOuter.apply(this, arguments);

        const options = {
            attachment: 'top left',
            targetAttachment: 'bottom left',
            constraints: [
                {
                    to: 'window',
                    attachment: 'together',
                }
            ]
        };

        return (
            <TetherComponent
                target={this.dropdownFieldNode}
                options={options}
                matchWidth
            >
                {/* Apply position:static to our menu so that it's parent will get the correct dimensions and we can tether the parent */}
                {React.cloneElement(menu, {style: {position: 'static'}})}
            </TetherComponent>
        )
    }
}

(Btw, does anybody know, why renderOuter can’t be directly overridden here?)

TetherComponent:

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import Tether from 'tether';

class TetheredChildrenComponent extends Component {
    render() {
        return this.props.children;
    }

    componentDidMount() {
        this.props.position();
    }

    componentDidUpdate() {
        this.props.position();
    }
}

export default class TetherComponent extends Component {
    componentDidMount() {
        this.tetherContainer = document.createElement('div');
        document.body.appendChild(this.tetherContainer);

        this.renderTetheredContent();
    }

    componentDidUpdate() {
        this.renderTetheredContent();
    }

    componentWillUnmount() {
        this.destroyTetheredContent();
    }

    renderTetheredContent() {
        ReactDOM.render(
            <TetheredChildrenComponent
                target={this.props.target}
                position={this.position}
            >
                {this.props.children}
            </TetheredChildrenComponent>,
            this.tetherContainer
        );
    }

    position = () => {
        if (!this.tether) {
            this.tether = new Tether({
                ...this.props.options,
                element: this.tetherContainer,
                target: this.props.target,
            });
        }

        if (this.props.matchWidth) {
            this.tetherContainer.style.width = `${this.props.target.clientWidth}px`;
        }

        this.tether.position();
    };

    destroyTetheredContent() {
        ReactDOM.unmountComponentAtNode(this.tetherContainer);

        this.tether.destroy();

        document.body.removeChild(this.tetherContainer);
    }

    render() {
        return null;
    }
}

My case is pretty complex. So here are only important parts. In my Dropdown component render I do:

      <Select
        dropdownComponent={ DropdownMenu }

And here are parts of DropdownMenu component:

  componentDidMount() {
    /*
     * DropdownMenu is called from dropdown component. In order to get the
     * dropdown component dom node we have to render menu first.
     * Now in `componentDidMount` when it was renderd we can access parentNode and
     * inherit some CSS styles from it and rerender menu again with proper styling.
     * So this is why we call `setState` here and cause second render
     */
    const dropdownFieldNode = ReactDOM.findDOMNode(this).parentNode;

and in render I return:

    return (
      <TetherComponent target={ dropdownFieldNode } options={ options }>
        { this.props.children }
      </TetherComponent>
    );

And here is TetherComponent as is (just a wrapper around tether lib):

import React from 'react';
import ReactDOM from 'react-dom';
import Tether from 'tether';

/**
 * This component renders `children` in a tetherContainer node and
 * positions the children near the `target` node using rules from `options`
 */
const TetherComponent = React.createClass({
  propTypes: {
    children: React.PropTypes.node,
    target: React.PropTypes.object,
    options: React.PropTypes.object,
  },

  componentWillMount() {
    // init tether container
    this.tetherContainer = document.getElementById('tetherContainer');
    if (!this.tetherContainer) {
      this.tetherContainer = document.createElement('div');
      this.tetherContainer.id = 'tetherContainer';
      document.body.appendChild(this.tetherContainer);
    }
  },

  componentDidMount() {
    this.update();
  },

  componentDidUpdate() {
    this.update();
  },

  componentWillUnmount() {
    this.destroy();
  },

  update() {
    if (!this.props.target) return;

    this.element = ReactDOM.render(this.props.children, this.tetherContainer);

    if (!this.tether) {
      this.tether = new Tether({
        ...this.props.options,
        element: this.element,
        target: this.props.target,
      });
    }
    this.tether.position();
  },

  destroy() {
    ReactDOM.unmountComponentAtNode(this.tetherContainer);
    this.tether.destroy();
  },

  render() {
    return <div />;
  }
});

export default TetherComponent;

@kamagatos I think it’d be great if you could make a pull request to integrate React Portals into this project. It’ll be very useful.

@kamagatos Thank you for this! Made my life so much easier.

One note, I was using this in a page that is scrollable and I had to make the following addition when setting the top so that it worked when scrolling:

top: dimensions.top + dimensions.height + window.pageYOffset

I agree that it would be great if this were somehow baked into react-select. Thanks again!

In case anyone needs it, here’s a hacked together TypeScript version based on the post by @burtyish. I think I fixed the mobile issues, see the _handleTouchOutside method, it needs to check that the touch event was inside the tethered item (which is not inside the react-select wrapper). It does this by overriding the react-select handleTouchOutside method. I also switched to react-measure for measurements, since I use that elsewhere in my project.

import * as React from 'react';
import * as Select from 'react-select';
var TetherComponent = require('react-tether');
import * as Measure from "react-measure";

function WrappedOuter(outer: JSX.Element, dimensions: Measure.Dimensions){
    console.log(dimensions)
    return (
        <TetherComponent
            attachment="top left"
            targetAttachment="bottom left"
            classes={{element: 'tethered-select-options'}}
        >
            {/* The first child is tether's target */}
            <div></div>
            {/* Apply position:static to our menu so that it's parent will get the correct dimensions and we can tether the parent */}
            {React.cloneElement(outer, {style: {position: 'static', minWidth: dimensions.width}})}
        </TetherComponent>
    );
}

class MeasuredOuter extends React.Component<{ outer: JSX.Element }, {}> {
    render() {
        return (
            <Measure>
                { (dimensions: Measure.Dimensions) => WrappedOuter(this.props.outer, dimensions) }
            </Measure>
        );
    }
}

export class TetheredSelect extends Select {
    constructor(props: any) {
        super(props);
        this.mySuper = Object.getPrototypeOf(Object.getPrototypeOf(this)); // Is there a better way to get an untyped super in TypeScript? 
        this.renderOuter = this._renderOuter;
        this.handleTouchOutside = this._handleTouchOutside;
    }

    componentDidMount() {
        this.mySuper.componentDidMount.call(this);
    }

    _handleTouchOutside(event: any) {
        // The original react-select code is modified to also check if the touch came from inside the tethered container
        if (this.wrapper && !this.wrapper.contains(event.target) && !this.measuredOuter.contains(event.target)) {
            (this as any).closeMenu();
        }
    }

    _renderOuter() {
        const outer = this.mySuper.renderOuter.apply(this, arguments);

        // Don't return an updated menu render if we don't have one
        if (!outer) {
            return null;
        }

        return <MeasuredOuter ref={x => this.measuredOuter = x } outer={outer} />;
    }
    
    handleTouchOutside: any;
    measuredOuter: any;
    renderOuter: any;
    mySuper: any;
    wrapper: any;
}

Thanks for everyone sharing here. Since I found this thread useful, I want to share my experience on using Dimensions here. Wrapping the entire Select with Dimensions, as in https://github.com/JedWatson/react-select/issues/810#issuecomment-250274937, results in the entire component being wrapped in a div styled by tether.js thus:

{
    width: 100%;
    height: 100%;
    padding: 0px;
    border: 0px;
}

I found this can create a problem, for instance if the Select has a float style.

I solved this by getting Dimensions to wrap just Select’s outer element. Here’s my tweak. Note: I solved it for regular, not CreatableSelect.

import React, { Component } from 'react';
import Select from 'react-select';
import TetherComponent from 'react-tether';
import Dimensions from 'react-dimensions';

class WrappedOuter extends Component {
    render() {
        const {
            outer,
            containerWidth
        } = this.props;

        return (
            <TetherComponent
                attachment="top left"
                targetAttachment="bottom left"
                constraints={[{
                    to: 'scrollParent',
                    attachment: 'together',
                }]}
                classes={{element: 'tethered-select-options'}}
            >
                {/* The first child is tether's target */}
                <div></div>
                {/* Apply position:static to our menu so that it's parent will get the correct dimensions and we can tether the parent */}
                {React.cloneElement(outer, {style: {position: 'static', minWidth: containerWidth}})}
            </TetherComponent>
        );
    }
}

WrappedOuter = Dimensions()(WrappedOuter); // <---- Here's where the outer element is wrapped with Dimensions

export default class TetheredSelect extends Select {
    constructor(props) {
        super(props);

        this.renderOuter = this._renderOuter;
    }

    componentDidMount() {
        super.componentDidMount.call(this);
    }

    _renderOuter() {
        const outer = super.renderOuter.apply(this, arguments);

        // Don't return an updated menu render if we don't have one
        if (!outer) {
            return null;
        }

        return <WrappedOuter outer={outer}/>;
    }
}

Is anyone currently working on adding this either as default behaviour or as an option? @stinoga’s solution seems to work well.

@oluckyman Having the same issue here! If I have other elements below the Select, I have no issues since there is plenty of space and I also reduce the height of the dropdown, but when the select is closer to the bottom of the page it pushed the main container.

Were you able to find a solution for this?

I ended up using dropdownComponent prop with my own wrapper component around the menu component. That wrapper is using ‘portal’ technic to render menu into body node. Also I’ve used tether lib to position menu. Pretty happy with this solution. Bonus: now the menu drops up if there is no place below the input.

menuPortalTarget is decent, but in a fixed scrollable modal, in some cases it does not work well with scrolling (i.e. if you have another fixed element below the scrollable area). You can use closeMenuOnScroll, but it is quite visibly not closing the menu quickly enough.

For now, I have manually overriden react-select’s menu placing logic by manually calculating menuPlacement prop value and passing it to Select. The problem is that Select contains some state inside of it, so you have to fully rerender Select when menu placement changes (you do this by passing a new key prop).

As mentioned by @crohn, I think it should be considered to allow explicitly overriding the menu placement logic.

There is still one problem with the @kamagatos Portal solution: when you open your menu on a page with a lot of content(with browser scroll bar) and then we scroll with our browser, the menu stays open and floating. Anyone managed to close the react-select menu on browser scrolling?

@kamagatos using Portals is a way to go! The only problem with your example is that when the page is scrolled down, the menu will have the wrong top position: top: dimensions.top + dimensions.height, in your example. You should also add a vertical scroll value like this top: dimensions.top + dimensions.height + window.scrollY so when your page is scrolled down before opening select - the outer menu will appear as it should - below your field. If your page could have a horizontal scroll, just think about that also.

@tutok i’ve not dealt with the touch support issue in my application using @nehero’s solution. but this is probably the way? see. the _handleTouchOutside solution from @russpowers’s comment https://github.com/JedWatson/react-select/issues/810#issuecomment-263863746

Here’s an ES6 implementation of @russpowers’ TypeScript component if anyone wants it:

import React, { Component } from 'react';
import Select from 'react-select';
import TetherComponent from 'react-tether';
import dimensions from 'react-dimensions';

class WrappedOuter extends Component {
  render() {
    const {
      outer,
      containerWidth
    } = this.props;

    return (
      <TetherComponent
        attachment="top left"
        targetAttachment="bottom left"
        constraints={[{
          to: 'scrollParent',
          attachment: 'together'
        }]}
        classes={{ element: 'tethered-select-options' }}
      >
        {/* The first child is tether's target */}
        <div />
        {/*
          Apply position:static to our menu so that it's parent
          will get the correct dimensions and we can tether the parent
        */}
        {React.cloneElement(outer, {
          style: { position: 'static', minWidth: containerWidth }
        })}
      </TetherComponent>
    );
  }
}

const DimensionsWrappedOuter = dimensions()(WrappedOuter);

export default class TetheredSelect extends Select {
  constructor(props) {
    super(props);

    this.renderOuter = this._renderOuter;
    this.handleTouchOutside = this._handleTouchOutside;
  }

  componentDidMount() {
    super.componentDidMount.call(this);
  }

  _handleTouchOutside(event) {
    // The original react-select code is modified to also check if the
    // touch came from inside the tethered container
    const isNotInWrapper = this.wrapper &&
      !this.wrapper.contains(event.target);
    const isNotInOuter = this.measuredOuter &&
      !this.measuredOuter.contains(event.target);

    if (isNotInWrapper && isNotInOuter) {
      this.closeMenu();
    }
  }

  _renderOuter() {
    const outer = super.renderOuter.apply(this, arguments);

    // Don't return an updated menu render if we don't have one
    if (!outer) {
      return null;
    }

    return (
      <DimensionsWrappedOuter
        ref={(x) => (this.measuredOuter = x)}
        outer={outer} />
    );
  }
}

And here’s the same handleClickOutside function applied to @stinoga’s component for Async/Createable

import React from 'react';
import Dimensions from 'react-dimensions';
import Select from 'react-select';
import TetherComponent from 'react-tether';

class TetheredSelectWrap extends Select {
  constructor(props) {
    super(props);

    this.renderOuter = this._renderOuter;
    this.handleTouchOutside = this._handleTouchOutside;
  }

  _handleTouchOutside(event) {
    // The original react-select code is modified to also check if the
    // touch came from inside the tethered container
    if (this.wrapper && !this.wrapper.contains(event.target)) {
      this.closeMenu();
    }
  }

  componentDidMount() {
    super.componentDidMount.call(this);
  }

  _renderOuter() {
    const { containerWidth } = this.props;
    const menu = super.renderOuter.apply(this, arguments);

    // Don't return an updated menu render if we don't have one
    if (!menu) {
      return <noscript />;
    }

    return (
      <TetherComponent
        renderElementTo="body"
        ref="tethered-component"
        attachment="top left"
        targetAttachment="top left"
        constraints={[{
          to: 'window',
          attachment: 'together',
          pin: ['top']
        }]}
      >
        {/* Apply position:static to our menu so that it's parent will get the correct dimensions and we can tether the parent */}
        <div></div>
        {React.cloneElement(menu, {style: {position: 'static', width: containerWidth}})}
      </TetherComponent>
    );
  }
}

// Call the AsyncCreatable code from react-select with our extended tether class
class TetheredSelect extends React.Component {
  render() {
    return (
      <TetheredSelectWrap.Async {...this.props}>
        {(asyncProps) => (
          <TetheredSelectWrap.Creatable {...this.props}>
            {(creatableProps) => (
              <TetheredSelectWrap
                {...asyncProps}
                {...creatableProps}
                onInputChange={(input) => {
                  creatableProps.onInputChange(input);
                  return asyncProps.onInputChange(input);
                }}
              />
            )}
          </TetheredSelectWrap.Creatable>
        )}
      </TetheredSelectWrap.Async>
    );
  }
}

export default Dimensions()(TetheredSelect);

These both seem to work on desktop and mobile for me.

Would be good to find easier solution to this problem, anybody has ideas where to look?

To me this issue gets worse when using Async (even not in mobile), I think because the height of the menu changes after options get loaded.

Is there a way to trigger positioning computation manually? As far as I understand, MenuPlacer passes a ref callback to Menu in which getPlacement magic happens, updating MenuPlacer state. So I guess the answer is no.

Do you think exposing an API to trigger positioning computation could be useful in future releases? Something like the focus or blur you already expose.

Answering my own questions. It seems that in the Select component the following function will close the menu every time on touch devices:

	handleTouchOutside (event) {
		// handle touch outside on ios to dismiss menu
		if (this.wrapper && !this.wrapper.contains(event.target)) {
			this.closeMenu();
		}
	}

My guess is that because with both the react-tether and the ReactDOM.createPortal solutions the actual menu element is rendered directly to the body element in the dom, the this.wrapper.contains(event.target) call always return false.

To fix this I did override the handleTouchOutside function to also look whether the touch is inside the menu and menuContainer elements. Here is the updated version

	handleTouchOutside (event) {
		// handle touch outside on ios to dismiss menu
                if (this.wrapper && !this.wrapper.contains(event.target) &&
                    this.menuContainer && !this.menuContainer.contains(event.target) &&
                    this.menu && !this.menu.contains(event.target)) {

                    this.closeMenu();
                }
	}

With my quick testing this seemed to work. However I don’t know if this has any unwanted side effects

Thanks @nehero your solution saved me a lot of work! 👍 I want to marry you hahaha

I found a css solution without using Portals. In your Select wrapper component capture and handle the onOpen function of the Select component to repositionate the container with fixed position based on the Select-control div. Probably not the best solution, but it’s simple and it works. Hope it helps

export class MySelectWrapper extends React.Component {
  //constructor, state, and wathever methods you need
 onOpen() {
    let inputWrapper = $('.Select-control').get(0).getBoundingClientRect();
    $('.Select-menu-outer').css({
      'top': inputWrapper.top+inputWrapper.height+'px',
      'left': inputWrapper.left+'px',
      'width': inputWrapper.width+'px',
    })
}
render() {
     return(
       <Select
           onOpen={this.onOpen}
           menuContainerStyle={{'position':'fixed', 'zIndex': '1500'}}
           //...rest of properties
        />
     )
}```

@stinoga No, just copy the Select.AsyncCreatable to your project with replaced import

import Select from './PathToYourTetheredSelectFromTheAbove';

@juan0087 WOW! Thanks for that detailed response. Will give it a shot right now, and I’m sure it will help others in the future.

Has anyone had any luck with this? I can’t use a react-select in a modal without it causing scrolling issues. If I try and hijack .Select-menu-outer and set it to position: fixed I get weird scrolling issues. Someone suggested using react-tether, but it doesn’t look like that’s an easy implementation.