Material UI Base Fiddle
HTML
<script src="https://unpkg.com/[email protected]/dist/react-with-addons.js"></script>
<script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script>
<script src="https://rawgit.com/lechup/c5d51b8e474f7b5d48bafe3ef0f958b7/raw/0a2f0a5f96095f88f3e47fa78cb3daf023585698/MaterialUI.v.0.18.5.umd.min.js"></script>
<br /><br /><br /><br /><br /><br />
<p>Type anything and scroll to see bug</p>
<div id="container"></div>
CSS
.scrollWrapper {
overflow: auto;
height: 500px;
}
.scroll {
height: 1000px;
}
Babel + JSX
const { MuiThemeProvider, AutoComplete } = MaterialUI;
class AutoCompleteExample extends React.Component {
constructor(props) {
super(props);
this.scrollWrapperElement = null;
}
state = {
dataSource: []
}
handleUpdateInput = (value) => {
this.setState({
dataSource: [
value,
value + value,
value + value + value,
],
});
};
render() {
return (
<div className="scrollWrapper">
<div ref={(scrollWrapperElement) => {this.scrollWrapperElement = scrollWrapperElement;}} className="scroll">
<AutoComplete
hintText="Type anything"
dataSource={this.state.dataSource}
onUpdateInput={this.handleUpdateInput}
anchorEl={this.scrollWrapperElement}
/>
</div>
</div>
);
}
}
const App = () => (
<MuiThemeProvider>
<AutoCompleteExample />
</MuiThemeProvider>
);
ReactDOM.render(
<App />,
document.getElementById('container')
);