Programmatically set the option list

[Farnsi]

is that possible in combination with createAsyncOptions?

On a multiple, i want to remove the selected item from the list and add it them again when x is clicked.

Or is it possible to re-execute the fetchData process? Then i can filter the list too, currently it filters only on typing, but not on opening the list.

const props = createAsyncOptions(fetchData)

function updateListe(selected: string[]) {
  // what todo here, to remove the selected items from the option-list? 
  // or how can fetchData be called here in component context to filter the list?
}

<Select multiple {...props} onChange={updateListe}></Select>

[Farnsi]

Not sure, if this is the best solution, but for my usecase ok:

Use a modified createAsyncOptions method and added only a setter for options:

export function createAsyncOptions(fetcher: (inputValue: string) => Promise<any[]>) {
  const [inputValue, setInputValue] = createSignal('')
  const [asyncOptions, { mutate }] = createResource(inputValue, fetcher, {
  //                 ^^^^^^^^^^^^ added
    initialValue: [],
  })

  return {
    set options(items) {
      mutate(items)
    },
    // ^^^^^^^^^^^^^^^^^^ added
    get options() {
      return asyncOptions()
    },
    get loading() {
      return asyncOptions.loading
    },
    onInput: setInputValue,
    readonly: false,
  }
}

// usage
const props = createAsyncOptions(fetchData)

async function updateList(selected: string[]) {
  // filter options here and set remaining
  props.options = ['remaining','options']
}

<Select multiple {...props} onChange={updateList}></Select>

@martinpengellyphillips I can create a PR if it is ok for you to add a setter for options? (don't know what sideffects it causes)

I think to add the complete filter logic (remove selected items from a list) into your plugin is not a good idea, cause of the "endless" possibilities of an option-list (grouped, etc.). Only with the setter, everybody could implement their own filter.