react-functional-select
react-functional-select copied to clipboard
Some bugs I spotted...
- If
hideSelectedOptions
is set to true, all other options disappear after an option is selected. (Might be related to search functionality) - If
hideSelectedOptions
is set to false,rfs-option-selected
css class is applied to all options after an option is selected. -
onOptionChange
does not fire again after an option is selected. Note that this was the case whenhideSelectedOptions
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()}
/>
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.