I am trying to implement 2 select box 1st select box will be the simple select box. 2nd select box will have infinite scroller functionality and for this, I am using the react-select-async-paginate library.

Issue Explanation

AsyncPaginate is the component of react-select-async-paginate library. It uses loadOptions function attribute to load the option into the select box and it expect return value as {options: [], hasMore: false}.

In my code, in the loadOptions attribute, I am calling the loadHostOptions function to get the options. And on change of the first dropdown, I am calling loadHostOptions function. But in this case, correct options are not reflected in the 2nd dropdown.

Can anyone help me with how to load options on the change of the first dropdown?

Here is codesandbox

Code

import React from "react";

import { AsyncPaginate } from "react-select-async-paginate";

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      firstSelectVal: "",
      value: null
    };
  }

  firstSelectChange = (event) => {
    this.setState({ firstSelectVal: event.target.value });
    if (event.target.value) {
      this.loadHostOptions("java", []);
    }
  };

  onPagiChange = (event) => {
    this.setState({ value: event});
  };

  loadHostOptions = async (search, prevOptions) => {
    if (search === "java") {
      const responseJSON = {
        results: [
          {
            value: 1,
            label: "Java"
          }
        ],
        has_more: false
      };

      return {
        options: responseJSON.results,
        hasMore: responseJSON.has_more
      };
    } else {
      const responseJSON = {
        results: [
          {
            value: 1,
            label: "Java"
          },
          {
            value: 2,
            label: "C  "
          },
          {
            value: 3,
            label: "Python"
          },
          {
            value: 4,
            label: "Node"
          },
          {
            value: 5,
            label: "Go, Lang"
          }
        ],
        has_more: false
      };

      return {
        options: responseJSON.results,
        hasMore: responseJSON.has_more
      };
    }
  };

  render() {
    return (
      <div>
        <h1>react-select-async-paginate</h1>
        <h2>1st Selectbox</h2>
        <select
          id="lang"
          onChange={this.firstSelectChange}
          value={this.state.firstSelectVal}
        >
          <option value="">Select</option>
          <option value="java">Java</option>
        </select>
        {this.state.firstSelectVal ? (
          <>
            <h2>2nd Selectbox</h2>
            <AsyncPaginate
              value={this.state.value}
              loadOptions={(search, prevOptions) =>
                this.loadHostOptions(search, prevOptions)
              }
              onChange={(e) => this.onPagiChange(e)}
            />
          </>
        ) : (
          ""
        )}
      </div>
    );
  }
}

export default App;

CodePudding user response：

You will have to change your onPagiChange function to

onPagiChange = (event) => {
   this.setState({ value: event});
};

That is set the entire event as value instead of event.value

Update

The actual issue is whenever you click on the AsyncPaginate field it will call loadHostOptions function and pass the current value to the search argument. In that case whatever you type in will be the value of search. So if you want to use the value of first Select box to filter option for the second one, you will have to directly use the this.state.firstSelectVal directly inside the loadHostOptions function. Like this

  loadHostOptions = async (search, prevOptions) => {
    if (this.state.firstSelectVal === "java") {
      const responseJSON = {
        results: [
          {
            value: 1,
            label: "Java"
          }
        ],
        has_more: false
      };

      return {
        options: responseJSON.results,
        hasMore: responseJSON.has_more
      };
    } else {
      const responseJSON = {
        results: [
          {
            value: 1,
            label: "Java"
          },
          {
            value: 2,
            label: "C  "
          },
          {
            value: 3,
            label: "Python"
          },
          {
            value: 4,
            label: "Node"
          },
          {
            value: 5,
            label: "Go Lang"
          }
        ],
        has_more: false
      };

      return {
        options: responseJSON.results,
        hasMore: responseJSON.has_more
      };
    }
  };