Re-use payload form components in custom field

[hatsumatsu]

Hi, I'm currently trying to build a custom field that shows a select element. When typing in the select's input the options should be populated with results from an external API based on the input value.

My approach so far was promising, just re-using payload's SelectInput like this:

import { useField, SelectInput } from 'payload/components/forms';

function MyCustomField() {
    const [query, setQuery] = useState();
    const [options, setOptions] = useState([]);

    const { showError, value, setValue } = useField({
        path,
    });

    useEffect(() => {
        const results = getResultsFromAPI(query);
        setOptions(results);
    }, [query]);

    const onChange = useCallback((_option) => {
        setValue(_option?.value || null);
    }, [setValue]);

    const onInputChange = useCallback((_query) => {
        setQuery(_query)
    }, [setQuery]);

    return (
        <SelectInput
            path={path}
            name={name}
            label={label}
            options={options}
            value={value}
            onInputChange={onInputChange}
            onChange={onChange}
            showError={showError}
        />
    );
}

My idea was to use react-select's onInputChange prop to get the current input's value, query the API and populate options .
Unfortunately payload's SelectInput component only exposes a few of react-select's props, so I can not use onInputChange.

Would it be possible to expose more props from react-select? What would be the most efficient approach handling this use case without replicating SelectInput?

[jacobsfletch]

@hatsumatsu 💯 we are actively overhauling our component library right now to make it significantly more reusable and developer friendly. This is the exact type of problem we're hoping to completely eliminate. You can track the progress in this thread: #293. Feel free to post your ideas or requirements in there as well and we'll be sure to hit them.