Async Data option is missing in Select Component

[mvmilanjain]

Hi @rtivital ,

Async way of loading data / options in Select & Multiselect in missing.

I am using matine as UI component library in my project but due to this async way of loading data i have to use another package.

[rtivital]

You can subscribe to search query changes with onSearchChange prop in both components. Based on that prop you can send requests to your api.

[mvmilanjain]

Oh thats great :)
Let me try this option

[mvmilanjain]

@rtivital one more thing, Are you planning to come up with DataGrid Package or can add more options for Table component like Sorting, Searching, filtering, Selection etc..

[rtivital]

Yes, we will add such component in one of future releases

[mvmilanjain]

Eagerly waiting for that package.

[chitralverma]

You can subscribe to search query changes with onSearchChange prop in both components. Based on that prop you can send requests to your api.

Will this help to load a drop with a lot of values lazily? for example 20 items at a time etc.

[tkharrison]

Is there any support for a loading indicator in the dropdown? If not, do you happen to have any recommendations for showing the user that the request sent on the searchChange event is pending? Appreciate the advice, love the UI library!

[rtivital]

https://ui.mantine.dev/component/autocomplete-loading

[skelawsky]

Implementing your Select combined with react-query and react-hook-form was child's play. Well done!
Is it possible to send you a donate? I can't find the link.

Below the code as if someone needed it.

            <Controller
              name="purchase_tax_rate"
              control={control}
              render={({ field }) => (
                <Select
                  onDropdownOpen={() => refetchTaxRateSelectData()}
                  label="Stawka VAT zakupu"
                  placeholder="Pick one"
                  {...field}
                  rightSection={taxRateIsLoading || taxRateIsFetching ? <Loader size={16} /> : null}
                  data={taxRateIsLoading || taxRateIsFetching ? [] : taxRateSelectData}
                />
              )}
            />

[danielbettech]

Hello @rtivital,

I'm trying to implement searchable Select component using onSearchChange and making request to my api based on the typed text.

const [searchText, setSearchText] = useState('')
const [fetchedData, setFetchedData] = useState([])

useEffect(() => {
  /* code for fetching data based on searchText eg. fetch(`/api/catalog?q=${searchText}`)*/
  setFetchedData(result.data)
}, [searchText])

<Select
  data={fetchedData}
  onSearchChange={setSearchText}
/>

With the code above this is what is happening.

1. Search works great. Fetched data is loaded into component.
2. When I select an option, data prop is emptied, but label still visible in the select input.
3. When click outside input label disappear from input, and I need to persist.

The problem I see is when I select an option onSearchChange is fired with an empty string, that try to query my api and I get an empty array as response. Also when I click outside onSearchChange is fired.

Is there any way I can achieve this?

Thanks,

[rtivital]

You need to keep selected value in data array in to keep it visible

[danielbettech]

Thanks for you response,

Actually, I can see more clearly whats the problem.

When fetch is called I'm mapping the result, because I need to concatenate two data properties and I'm also adding a - in between. So it is more readable.

const mappedResult = result.data.map((item) => {
  return {
    value: item.code,
    label: `${item.code} - ${item.description}`, // E.g. '1602013 - This is the description'
  }
})
setFetchedData(mappedResult)

When I select an option from the dropdown Select, the onSearchChange receives what I selected as a string, that one contains the - and that sring returns nothing from the api.

I remove the - and is working ok now. But I don't have a separator between the to values.

One solution I'm thinking is to remove the - before that fetch.

Thanks,

[danielbettech]

It worked.
Before the fetch call, i wrote this:

const cleanedSearchText = searchText.replace(' -', '')
fetch(`/api/catalog?q=${cleanedSearchText}`)

[arunpdl]

Does creatable prop support async way of creating options?

[rtivital]

No, it does not, you should handle async logic on your side

[aprilmintacpineda]

Here's how I did this, also has error handling.

import {
  ActionIcon,
  Loader,
  MultiSelect,
  MultiSelectProps
} from '@mantine/core';
import { IconRefresh } from '@tabler/icons';
import React, { useCallback, useEffect, useState } from 'react';
import { getFullName } from 'utils/users';
import { xhr } from 'utils/xhr';

type State = {
  data: { value: string; label: string }[];
  status: 'initial' | 'loading' | 'error' | 'success';
};

type Props = Omit<MultiSelectProps, 'data'>;

const UserSelect: React.FunctionComponent<Props> = props => {
  const [{ status, data }, setState] = useState<State>({
    data: [],
    status: 'initial'
  });

  const fetchData = useCallback(async () => {
    try {
      setState(oldState => {
        return {
          ...oldState,
          status: 'loading'
        };
      });

      const response = await xhr('/list-users');

      const {
        data
      }: {
        data: User[];
        nextToken?: string;
      } = await response.json();

      setState({
        data: data.map(user => {
          return {
            value: user.id,
            label: getFullName(user)
          };
        }),
        status: 'success'
      });
    } catch (error) {
      console.log(error);

      setState(oldState => {
        return {
          ...oldState,
          status: 'error'
        };
      });
    }
  }, []);

  useEffect(() => {
    if (status === 'initial') fetchData();
  }, [status, fetchData]);

  if (status === 'initial' || status === 'loading') {
    return (
      <MultiSelect
        {...props}
        data={[]}
        disabled
        rightSection={<Loader size={20} />}
      />
    );
  }

  return (
    <MultiSelect
      {...props}
      data={data}
      searchable
      nothingFound={
        status === 'error'
          ? 'There was an error loading the data. Click refresh icon to try again.'
          : 'Nothing found'
      }
      maxDropdownHeight={150}
      limit={20}
      rightSection={
        status === 'error' && (
          <ActionIcon onClick={fetchData}>
            <IconRefresh size={20} />
          </ActionIcon>
        )
      }
    />
  );
};

export default UserSelect;

[Sajarin-M]

infinite loading support ?
Can i load remaining select items on user scrolls to the drop down end ?

[rtivital]

No, that is not supported

[jayarjo]

Infinite loading is technically possible by providing something like react-virtualized list in dropdownComponent, however Select in mantine lacks a way to close the dropdown from outside.