Searchable dropdown in semantic-ui-react does not immediately display full list of options retrieved from API

Question

When I try to call an API to fill semantic UI's options, it displays a portion of the options at first and in order to display the full list I have to click outside the dropdown (blur it) first then click inside it again.

I have been stuck on this for a while and I really can't think of anything else to try, anyone know why it is behaving this way?

Here is the code:

import React, { Component } from 'react';
import { Dropdown } from 'semantic-ui-react';
import axios from 'axios';

let typingTimer;

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            creators: [],
            creatorsLoading: true,
            selectedCreator: null
        };
        this.searchCreators = this.searchCreators.bind(this);
        this.setCreatorsState = this.setCreatorsState.bind(this);
        this.changeCreator = this.changeCreator.bind(this);
    }

    componentDidMount() {
        this.searchCreators();
    }

    setCreatorsState(res) {
        this.setState({
            creators: res.data.map((user) => {
                return { text: `${user.name} (${user.country})`, value: user.id };
            }),
            creatorsLoading: false
        });
    }

    searchCreators(searchQuery) {
        if (searchQuery === '') {
            this.setState({ creatorsLoading: false });
            return null;
        }
        this.setState({ creatorsLoading: true });

        const args = {
            params: {
                'search_query: searchQuery.trim();
            }
        };

        axios
            .get(url, args)
            .then((res) => {
                if ('error' in res)
                    return this.setState({ creatorsLoading: false });
                else {
                    this.setCreatorsState(res.data);
                }
            })
            .catch((err) => this.setState({ creatorsLoading: false }));
    }

    delayExecute(text) {
        //Detect keystroke and only execute after the user has finish typing
        clearTimeout(typingTimer);
        typingTimer = setTimeout(() => {
            return this.searchCreators(text);
        }, 700);
        return true;
    }

    changeCreator(value) {
        if (value) this.setState({ selectedCreator: value });
        else this.setState({ selectedCreator: null });
    }

    render() {
        const {creators, creatorsLoading, selectedCreator} = this.state;
        return (
            <Dropdown
                selectOnBlur={false}
                loading={creatorsLoading || false}
                clearable
                onChange={(_, data) => this.changeUser(data.value)}
                onSearchChange={(_, data) => this.delayExecute(data.searchQuery)}
                placeholder="Creators"
                fluid
                selection
                search
                value={selectedCreator}
                options={creators}
            />
        );
    }
}

export default App;

score 1 · Accepted Answer · answered Mar 18 '20 at 15:21

I finally figured out what was wrong, so in case anyone stumbles upon something similar here it is:

Semantic UI's searchable dropdown performs search by default, so I was sending that searchQuery to the API and retrieving an array of users according to that searchQuery, and afterwards the dropdown performs another search inside that retrieved array for that same searchQuery. Since the text I was putting inside the options did not have the same criteria I was searching for in the API, I got different results.

this.setState({
    creators: res.data.map((user) => {
        return { text: `${user.name} (${user.country})`, value: user.id };
    }),
    creatorsLoading: false
});

And since I was using selectOnBlur={false} when I clicked outside the dropdown, the searchQuery emptied, and the default search did not get performed, which is why I got the correct array I was looking for after blurring.

score 0 · Answer 2 · answered Feb 27 '23 at 17:10

This took me forever to figure out. The problem is actually how the search functionality works, see: https://github.com/Semantic-Org/Semantic-UI-React/issues/3932

Change the search prop to search={(i) => i} and it will stop filtering out results once the remote options are returned.

Searchable dropdown in semantic-ui-react does not immediately display full list of options retrieved from API

2 Answers2