The input element is available on the Autosuggest instance as input
.
You could store the input element like this:
function storeInputReference(autosuggest) {
if (autosuggest !== null) {
this.input = autosuggest.input;
}
}
<Autosuggest ref={storeInputReference} ... />
When the suggestions container has a scroll bar, and you scroll beyond the start/end of the container, the page starts scrolling. To stop that, you can use react-isolated-scroll
:
import IsolatedScroll from 'react-isolated-scroll';
function renderSuggestionsContainer({ containerProps, children }) {
const { ref, ...restContainerProps } = containerProps;
const callRef = isolatedScroll => {
if (isolatedScroll !== null) {
ref(isolatedScroll.component);
}
};
return (
<IsolatedScroll ref={callRef} {...restContainerProps}>
{children}
</IsolatedScroll>
);
}
<Autosuggest renderSuggestionsContainer={renderSuggestionsContainer} ... />