React-tags: Updating suggestions prop does not update options list until next input (v6)

Hi @yrik, data fetching is not provided by the component but implemented by yourself. Whilst I cannot debug individual implementations I'm happy to offer some advice.

Following on from the examples in #205 I'd suggest fetching more suggestions than you need to display. For example if you currently display 6 suggestion then try fetching 12 or 15 from the server. This way the suggestionsFilter should still have some relevant data to use until new ones are received.

Thank you for getting back!
It's a bit different problem.
Imagine I have an autocomplete for the word "beer"

1. suggestion list is empty ([])
2. user types "be" --> server returns [bee, beard, beetroot, beer] (we show nothing because options list is not updated as server returns data after getOptions call)
3. user types "bee" --> server returns [bee, beetroot, beer] we show [bee, beard, beetroot, beer], we show previously updated data, not fresh one
4. user types "beer" --> server returns [beer], we show [bee, beetroot, beer], we show previously updated data, not fresh one

If onInput would be async it would work. Or if there is a way to call const options = getOptions.call(this, query) from custom onInput it would work too.

OK I think I follow - so suggestions may be displayed that should not match the current query, is this correct?

I'll try and recreate the issue with this example code

OK I think I follow - so suggestions may be displayed that should not match the current query, is this correct?

Exactly! In my case it almost always shows the result of the previous query. Except for the cases when the response is cached in browser and returned instantly.

I was trying to recreate it using jsfiddle but did not manage to connect the lib there properly.
If you have any basic example of this plugin in jsfiddle I can extend it with server-side autocomplete example.

Also worth noticing that I'm using v6 and the example you have seems like of prev version.
"react-tag-autocomplete": "6.0.0-beta.5"

I believe this issue has been introduced to v6 by the desire to avoid componentWillReceiveProps() due to changes in recent and upcoming versions of React. In the new version I refactored the suggestions to be updated only on mount and onInput which doesn't account for the suggestions prop changing.

It can be solved by using getDerivedStateFromProps() but I think this approach will require some optimisation to prevent unnecessary renders.

  static getDerivedStateFromProps (props, state) {
    const options = getOptions(props, state)
    return { options }
  }

I've spent a few minutes on this and I think I have come up with a suitable solution, the animation below shows the suggestions prop being updated asynchronously and the options list getting updated without any other input:

The change was quite straightforward so I'll do some more testing and raise a PR.

I guess useEffect should cover this nicely as it could monitor options change.

useEffect(() => {
  setOptions(getOptions(props, state))
}, [options]);

I have released v6.0.0-beta.6 which should fix this issue.