react-select-search icon indicating copy to clipboard operation
react-select-search copied to clipboard

Allow controlled search options

Open joeyparis opened this issue 4 years ago • 2 comments

Prior to version 3 if nothing (as in null/undefined, not an empty array) was returned for the getOptions prop the component would continue to use the values passed in the options prop. This is helpful when you want the options to be controlled by your own component rather than managed by the SelectSearch component. This update should not affect existing behavior.

Here's a rough example:

const Dropdown = ({ default_options }) => {
	const [options, setOptions] = useState(default_options)

	const advancedOptionFunction = (search) => {
		// ...do advanced search things
		const new_option = () => [] // pretend this gets new options
		setOptions(new_options)
	}

	return (
		<SelectSearch
			search
			options={options}
			getOptions={(q) => {
				advancedOptionFunction(q)
				// Note the lack of return. Returning an array or Promise
				// would still act the same as before this pull request
			}}
		/>
	)
}

joeyparis avatar Apr 28 '21 16:04 joeyparis

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/tbleckert/react-select-search/DoDdb4yfgT85Qof485R4Hgyvu2jT
✅ Preview: https://react-select-search-git-fork-joeyparis-control-853c00-tbleckert.vercel.app

vercel[bot] avatar Apr 28 '21 16:04 vercel[bot]

I was able to improve test coverage overall, but I took the equal.js code and relevant tests from fast-deep-equal. We might be better off removing equal.js and making fast-deep-equal an optional dependency and falling back to a more simple deep equal (like JSON.stringify or even just a one-level object comparison) if fast-deep-equal isn't included.

joeyparis avatar May 21 '21 22:05 joeyparis