Resolving options from promise breaks search function / use promise for options

[Valentin-Metz]

Hi, I'm trying to do the following:
I have a backend API that returns

    let all_teams: Promise<Team[]> = fetch_all_teams();

    interface Team {
        id: number;
        name: string;
    }

    async function fetch_all_teams(): Promise<Team[]> {
        const response = await fetch('/api/get_all_teams');
        if (!response.ok) {
            throw new Error(`HTTP error! Status: ${response.status}`);
        }
        return await response.json();
    }

Ideally I'd like to be able to use a promise in the options directly (this is great for when my backend API returns a mapping not recognized by fetch or I want to make only one API call and use only a part of it for the options.

If I try to work a round this with

    let all_teams_resolved: string[] = $state([]);
    onMount(async () => {
        try {
            const teams = await fetch_all_teams();
            all_teams_resolved = teams.map((team) => team.name);
        } catch (error) {
            console.error('Failed to fetch teams:', error);
            all_teams_resolved = [];
        }
    });

and then use options={all_teams_resolved}, the options display correctly in the dropdown menu, but fail to be searchable.
As soon as I type any letter all options disappear and I get a "No matching options".

[Valentin-Metz]

Here's a reproducible snippet without backend request:

    let all_teams_resolved: object[] = $state([]);
    onMount(async () => {
        try {
            all_teams_resolved = [
                {
                    "id": 1,
                    "name": "Team1"
                },
                {
                    "id": 2,
                    "name": "Team2"
                },
                {
                    "id": 3,
                    "name": "Team3"
                }];
        } catch (error) {
            console.error('Failed to fetch teams:', error);
            all_teams_resolved = [];
        }
    });

[mskocik]

great for when my backend API returns a mapping not recognized by fetch

Have you tried using fetchCallback, where you should return option array from fetch response. In your case:

<script>
function fetch_all_teams(json) {
  return json.map((team) => team.name);
}
</script>

<Svelecte fetchCallback={fetch_all_teams} ... />

Here's a reproducible snippet without backend request

Seems like a bug. As a workaround you can specify searchProps fields property.

<Svelecte searchProps={{fields: 'name'}} />

[mskocik]

@Valentin-Metz bug was fixed, let me know if fetchCallback solves your "promise issue" or we need to discuss it further.

[Valentin-Metz]

@Valentin-Metz bug was fixed, let me know if fetchCallback solves your "promise issue" or we need to discuss it further.

fetchCallback did not work, but I was able to solve this with onMount() after updating to the latest version.

Now it works as expected, ty!

[mskocik]

@Valentin-Metz I am curious, why the fetchCallback is not usable in your use case?

I am talking about setup like this:

<script>
function fetch_all_teams(json) {
  return json.map((team) => team.name);
}
</script>

<Svelecte
  fetch="/api/get_all_teams"
  fetchCallback={fetch_all_teams}
  ...
/>

Of course I don't have the whole picture if you are using all_teams_resolved resolved somewhere else, etc.