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

Some bugs I spotted...

Open barkin94 opened this issue 3 years ago • 1 comments

  1. If hideSelectedOptions is set to true, all other options disappear after an option is selected. (Might be related to search functionality)
  2. If hideSelectedOptions is set to false, rfs-option-selected css class is applied to all options after an option is selected.
  3. onOptionChange does not fire again after an option is selected. Note that this was the case when hideSelectedOptions was set to false, since there is currently no way to fire it twice while it is set to true afaik.

Code is pretty much like the following. If my code is wrong, feel free to let me know.

const getOptionLabel = useCallback((option: SomeObject): string => option.text, []);
const onOptionChange = useCallback((option: SomeObject | null): void => {
	console.log(option);
	if (!option) return;
	setSomeState(prevState => {
		return { ...prevState, id: option.id };
	});
}, []);

<Select
	options={someObjectArray}
	isDisabled={!!someValue}
	ref={selectRef}
	placeholder="some text"
	onOptionChange={onOptionChange}
	getOptionLabel={getOptionLabel}
	addClassNames={true}
	hideSelectedOptions={true}
	menuItemSize={30}
	blurInputOnSelect={true}
	noOptionsMsg="some text"
	themeConfig={...}
        onMenuClose={() => selectRef.current.blur()}
/>

barkin94 avatar Aug 02 '20 22:08 barkin94

Ya good catch, not entirely sure yet, but I'm recreating it as well. I think it has to do with the fact that in a single-select, hideSelectedOptions=true scenario, when the menu is opened it tries to scroll to the index of that selected option (but it is not in the menuOptions result set). This issue is worked around in multi-select scenarios by always opening to the first item in the menuOptions.

based-ghost avatar Aug 03 '20 03:08 based-ghost