Suggestions are scrolled with the window

divined commented 7 years ago

Suggestions are scrolled with the window.

AlexPoirier1 commented 7 years ago

Issue should be renamed to the actual problem (Suggestions are scrolled with the window)

AlexPoirier1 commented 7 years ago

I have worked around this issue by adding a scroll listener that re-calculates the menu positions. It is superbly hackish but it does not mess with the CSS so that when the issue is fixed, it shouldn't make it completly bug out.

[...]
componentWillMount() {
    window.addEventListener('scroll', this.handleScroll);
}

componentWillUnmount() {
    window.removeEventListener('scroll', this.handleScroll);
}

handleScroll() {
    const bottom = this.input.refs.input.getBoundingClientRect().bottom;
    const isVisible = (bottom > 0 && bottom < window.innerHeight);
    if(this.input.isOpen()) {
        if(isVisible) {
            this.input.setMenuPositions();
        }
        else {
            this.input.blur();
        }
    }
}
[...]

Assuming this.input is the ref to the actual auto-complete component.

<Autocomplete
    ref={el => (this.input = el)}

divined commented 6 years ago

ty

CMTegner commented 6 years ago

Just set the menu's position to absolute, and the wrapper to relative:

<Autocomplete
    wrapperStyle={{ position: 'relative' }}
    menuStyle={{ position: 'absolute' }}
/>

This will affix the menu to the bottom of the input.

illiptic commented 6 years ago

You also need to set top and left properties on the menu, to override the default positioning. (change top to suit the height of your input)


<Autocomplete
    wrapperStyle={{ position: 'relative' }}
    menuStyle={{ position: 'absolute', top: '35px', left: 0 }}
/>

reactjs / react-autocomplete

Suggestions are scrolled with the window #284