when I started writing on an input field in a simple form it displays an auto suggestion list of old data (autocomplete), when the (window scroll) it disappear and every thing is working fine.
but when I put the input field in antd modal which includes (other scroller) the suggestion list is still appearing when I scroll up/down.
A solution came to my mind which is adding event listener to antd modal scroller (ant-modal-wrapper) so when it is moved I turned off the auto suggestion feature. but I couldn't find way to add listener to that scroller cuz it is not (window.scroll).
I tried to use jquery also, like
$(".ant-modal-wrapper").on("scroll", function() {
console.log("Scrolling");
});
but did not work.
Also I used onScroll property inside modal div but did not work.
this is a screenshot may help to explain this issue in antd modal
suggestions list before scrolling
suggestions list after scrolling down
any suggestions or better solution to fix my issue would be helpful. thank you
Do the following to hide options of Autocomplete inside modal.
optionsOpen
and assign it as a value to open
prop of Autocompletescroll
in componentDidMount and update the state to false. This will cause the option to close when user does a scroll.Code Snippet
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Modal, Button } from "antd";
import { AutoComplete } from "antd";
const mockVal = (str, repeat = 1) => ({
value: str.repeat(repeat)
});
class App extends React.Component {
state = { visible: false, value: "", options: [], optionOpen: false };
scrolListener = () => {
if(this.state.optionOpen !== false && this.state.visible)
this.setState({ optionOpen: false });
};
componentDidMount() {
window.addEventListener("scroll", this.scrolListener, true);
}
componentWillUnmount() {
window.removeEventListener("scroll", this.scrolListener);
}
showModal = () => {
this.setState({
visible: true
});
};
handleOk = e => {
console.log(e);
this.setState({
visible: false
});
};
handleCancel = e => {
console.log(e);
this.setState({
visible: false
});
};
onSearch = searchText => {
this.setState({
optionOpen: true,
options: !searchText
? []
: [mockVal(searchText), mockVal(searchText, 2), mockVal(searchText, 3)]
});
};
onSelect = data => {
console.log("onSelect", data);
};
onChange = data => {
this.setState({ value: data });
};
render() {
return (
<div>
<Button type="primary" onClick={this.showModal}>
Open Modal
</Button>
<Modal
title="Basic Modal"
visible={this.state.visible}
onOk={this.handleOk}
onCancel={this.handleCancel}
>
<AutoComplete
open={this.state.optionOpen}
options={this.state.options}
style={{
width: 200
}}
onSelect={this.onSelect}
onSearch={this.onSearch}
placeholder="input here"
/>
<br />
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
</Modal>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("container"));
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.