hide autocomplete (suggestions ) list when scrolling in antd modal / react

Question

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

Answer 1

Do the following to hide options of Autocomplete inside modal.

• Maintain a state say optionsOpen and assign it as a value to open prop of Autocomplete
• Add a eventListener on scroll in componentDidMount and update the state to false. This will cause the option to close when user does a scroll.
• Remove eventListener in componentWillUnmount

Working demo is here

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"));