Setting the state onChange with getOptions()

[sm-adil]

Hey @tbleckert, With getOptions prop once we fetch the list and select an option, how are we supposed to update some (eg: drink) state with the onChange method. Cause whenever I try to update a state with onChange event the input field doesn't get updated.

Here's what I'm trying to achieve: https://codesandbox.io/s/eloquent-cherry-u3zm6

<SelectSearch
  options={[]}
  getOptions={(query) => {
    return new Promise((resolve, reject) => {
      fetch(`https://www.thecocktaildb.com/api/json/v1/1/search.php?s=${query}`)
        .then(response => response.json())
        .then(({ drinks }) => {
            resolve(drinks.map(({ idDrink, strDrink }) => ({ value: idDrink, name: strDrink })))
        })
        .catch(reject);
    });
  }}
  onChage={value => updateState(value)} // how are we supposed to achieve this
  placeholder="Your favorite drink"
  search
/>

[tbleckert]

@mohammed-adil The second argument in the onChange handler is the complete option object (including any optional key/values you might have there). So:

onChange={(value, option) => updateState(option.name)}

Hope that answers your question.

[tbleckert]

Ah sorry, misread the problem. You meant that the selectbox is empty after you select the option? The looks like a bug. Will take a look asap.

[tbleckert]

Found the issue, working on a fix

[sm-adil]

Thanks for the quick response @tbleckert. Will wait for the fix 🌟

[tbleckert]

@mohammed-adil Just published a new version, v1.2.1. Could you verify that the issue has been resolved and then close the issue if so?

Thanks for reporting!

[sm-adil]

@tbleckert everything seems to be working fine 💯. Thanks for the quick fix ⚡