0

I've had a look at a couple of other issues here on SO, without success (like Antd Select Search Box not rendering the matches).

Basically,

const AutoCompleteMultiple = ({
    onSelect,
    placeholder,
    filter,
    width = '100%',
    ...rest
}) => {
    const [loadMembers, { loading, data }] = useLazyQuery(withGroupsQuery);

    const variables = {...};

    const options = data ? parseMembers(data) : [];

    console.log(options);

    return (
        <StyledSelect
            mode="multiple"
            // labelInValue
            filterOptions={false}

            style={{ width: '100%' }}
            placeholder={placeholder}
            onFocus={() =>
                loadMembers({
                    variables: {
                        search: '',
                        ...variables,
                    },
                })
            }
            onSearch={search =>
                loadMembers({
                    variables: {
                        search,
                        ...variables,
                    },
                })
            }
            onSelect={(selected, option) => {
                if (onSelect) {
                    onSelect(selected, option.label, option.group);
                } else {
                    console.info(
                        'SelectMultipleGroupOrUserField – onSelect',
                        selected,
                        option
                    );
                }
            }}
            // notFoundContent: loading ? <Spin size="small" /> : 'Inga resultat',
            loading={loading}
        >
            {(options &&
                options.map(item => (
                    <Select.Option value={item.value} key={item.value}>{item.label}</Select.Option>
                ))) ||
                []}
        </StyledSelect>
    );
};

In the console log, I first get the onFocus loaded data items, then when searching I get one undefined and then the correct data post search - although, the component rerenders with "No data", regardless of the option update.

I'm losing my mind.

Cookie
  • 364
  • 1
  • 2
  • 12

2 Answers2

3

Try adding filterOption={false} to your code. Worked for me

ChronicLogic
  • 313
  • 3
  • 17
0

So what is happening is that the data comes through, but your component is already rendered. You need to set your options once the data is available and re-render the component. Like this...

const [options, setOptions] = useState([])

useEffect(() => {
    setOptions(parseMembers(data))
}, [data]
TR3
  • 327
  • 3
  • 6
  • Please try to provide an explanation of the code. – Mangaldeep Pannu Sep 09 '21 at 11:56
  • This doesn't actually work (same issue as before - "No data" although the data is clearly there), I'm starting to think there is something wrong with the antd component Select. – Cookie Sep 17 '21 at 13:43
  • Put a debugger in where you are mapping through your options in the `Select` component, and see what you are getting there. – TR3 Sep 17 '21 at 14:55