Dropdown with options from remote api

[delasource]

I would like to have a (multi)select / dropdown with options that i get from a remote api (ajax call).

The ajax call should be made when the node is created, not when the config is loaded.

This could be achieved with custom controls but it is very messy to implement in the first place.

The bare <select> elements does not work out of the box. Couldn't figure out why (it is just not clickable). I'm using the react-select component now.

[chrisjpatty]

So there is actually a (currently undocumented) way to do this in the config itself. You can provide a key to the select config called getOptions, which can be a function that takes in some data about the node and should return an array of options. That function is called on every render of the select control so you can use it to do async work as needed. (You are responsible to do your own caching of the data on your end however. So something like this:

Controls.select({
  name: "animal",
  label: "Animal",
  options: [{ value: "", label: "Loading" }],
  getOptions: (inputData, context) => {
    const { isFetching, options } = context;
    if (!isFetching && !options) {
      GlobalStore.dispatch(fetchOptions());
    }
    return options || [{ value: "", label: "Loading" }];
  },
});

In this case you start fetching as soon as the node renders, and store a fetching status and an array of options in a global store somewhere (could be redux, react context, whatever). Then when you render the node editor component you pass in those state variables as part of the context object. Then as soon as your options have been fetched you update that global store which will trigger the nodeEditor to re-render your node and re-call the getOptions function. Then you just return those fetched options. I'm using this pattern in a few places in my own work and it really should just be officially documented.

I am curious to hear about the trouble you're having with native select control though, do you have a repo or a codeSandbox with an example of it not working by chance?