[Bug] loadOptions is not passed to custom components

[alexandernst]

I'm customizing the components of react-select and I have a use case in which I'd like to know if the select element has been provided with a loadOptions function.

It should be possible to access the props of the customized component, and then the selectProps property, which should then give me all the props that have been passed to the react select. The loadOptions is missing in the list of properties that selectProps is returning.

Here is a repro demo: https://codesandbox.io/s/react-select-v3-sandbox-forked-yns2r?file=/example.js (check line 13)

[alexandernst]

I'm debugging this further and it seems that more props are missing. This might be caused because of missing spread somewhere?

[ebonow]

Confirmed. It appears that this is being omitted for some reason when passing the HOC AsyncSelect props to the Select.

react-select/packages/react-select/src/Async.js

Lines 184 to 210 in 56be61b

	render() {
	const { loadOptions, isLoading: isLoadingProp, ...props } = this.props;
	const {
	defaultOptions,
	inputValue,
	isLoading,
	loadedInputValue,
	loadedOptions,
	passEmptyOptions,
	} = this.state;
	const options = passEmptyOptions
	? []
	: inputValue && loadedInputValue
	? loadedOptions
	: defaultOptions || [];
	return (
	<SelectComponent
	{...props}
	ref={ref => {
	this.select = ref;
	}}
	options={options}
	isLoading={isLoading || isLoadingProp}
	onInputChange={this.handleInputChange}
	/>
	);
	}

A work around for now potentially could be to pass in another prop that references your loadOptions function, but I am also curious as to why this is.

[ebonow]

@alexandernst I was able to get a bit more information about the history of this. Apparently the Async component was created prior to the SelectProps being passed into the different components.

Would you mind sharing what the use-case is for accessing the loadOptions so we can better understand how you are using it?

[alexandernst]

@ebonow Sure!

I have a custom menuList component with a (more or less) complex logic.

When the user opens the menu, a few elements should be made visible. Depending if the select widget was passed a loadOptions function, a custom message should be appended to the bottom of the menu list elements. Then that function should be called in order to retrieve some more elements and get them appended to the list.

I was able to workaround the problem by doing an ugly hack which involves nesting the menuList component inside the definition of the select component, but being able to properly access the props.loadOptions prop would allow me to clean up and split my code.

[tubs-coder]

Sorry to awaken an old thread - just to mention i've also hit this issue.

I am looking to change the behaviour of the MultiValueRemove button based on the options received from the loadOptions function.

Use case: Some values in my multi-select are read only and some are not. I'm looking to read loadOptions to determine whether I should render the MultiValueRemove component for a particular item - if it exists in loadOptions then it can be added/removed.