[Autocomplete] Add anchor to the textfield, not the Window position

[haydencrain]

Description

Currently the Autocomplete popover responds when the entire window is scrolled. Is it possible to set it so that it anchors to a particular container scroll?

Images & references

In the example, the window was set to a height of 140% for the purpose of showing that the popover responds to the window, but not the container.

[Sharlaan]

How did you define your AutoComplete's prop anchorOrigin ?

If the menu is anchored to the window, it may sound like a missing .bind(this) defaulting this to window ...

[jadus]

Same problem here.
My autocomplete is in a scrollable dialog and the menu doesn't move when the dialog is crolled
Does anyone has a workaround ?
@Sharlaan What do you mean exactly ?
here is my component :

<AutoComplete
    name="routeSetter"
    anchorOrigin={{vertical: 'bottom', horizontal: 'left'}}
    value={this.state.routeSetter}
    searchText={this.state.routeSetter}
    filter={AutoComplete.noFilter}
    dataSource={routeSetters[gym]}
    onNewRequest={this.routeSetterChange}
    openOnFocus={true}
/>

where would you put a .bind(this ?

[Sharlaan]

Nevermind, without any code to review, i was assuming some dynamic function assigned to anchorOrigin. Such function must have this correctly bound, but it's not your case.

[haydencrain]

My apologies for not supplying code. My component is set out the same as @jadus.

I am also able to recreate this is in the material-ui docs:
In Popover, I can apply a max-height: 200px and overflow: scroll to one of the containers. When scrolling with the popover open, the container scroll seems to lock.

However, In Autocomplete, if I apply max-height: 200px and overflow: scroll like I did in the Popover docs, the container scroll does not lock, and so the menu does not move in line with the text field.

Looking at the Popover source I've noticed the reference is pointing to window. Is there any way I can map the reference to the div?

[Sharlaan]

Looking at the Popover source I've noticed the reference is pointing to window

which line ?

[haydencrain]

From material-ui/src/Popover/Popover.js, Line 406:

<EventListener
     target="window"
     onScroll={this.handleScroll}
     onResize={this.handleResize}
/>

Looks like the target points to window and scroll position is handled here.

[Razzwan]

The same problem. I had to be used https://github.com/moroshko/react-autosuggest instead.

[jgoux]

Using something like tether would make sense here.
There is an implementation of the AutoComplete using react-portal + tether here : https://hribb.github.io/react-mdl-extra/?selectedKind=AutoComplete&selectedStory=default
Seems to work great ! 👍

[jannakha]

here's a hack, one ugly hack....

1. Find a div container to which attach scroll listener (window doesn't fire scroll events in this case)
   in componentDidMount() {}
   const div = document.querySelector('div.application-container');
2. Attach event listener to that container on your component which has autosuggest
   div.addEventListener('scroll', this.handleParentContainerScroll.bind(this));
3. In event listener, eg handleParentContainerScroll() get ref to AutoComplete component and close it (if user scrolls parent container, they are not interested in auto complete content) - this.refs.authorInput.close();

ugly, but works for now... I tried another AutoComplete component, but it has same issue when it's on a scrollable container

[oliviertassinari]

Closed by #4783

[adishilo]

Though this is a bit old thread, We (my friend Guy helped here quite as much) would like to offer the solution we found which is actually offered by the material-ui AutoComplete component.

The AutoComplete component has a property named scrollableContainer which purpose is just that. Define the container component which the pop-over (drop-down) should cling to when it is scrolling. For example, if you set it to the dialog that contains the AutoComplete component - when the dialog scrolls, the drop-down list moves accordingly.
This scrollableContainer prop is an object, and it should be the DOM object of that container. E.g. If you are using React then:

let myDOMobject = ReactDom.findDOMNode(myReactComponent);

where myReactComponent is the container you need the DOM object for.
See also ReactDom.findDOMNode().