diff --git a/lib/src/components/Select/Select.tsx b/lib/src/components/Select/Select.tsx index 08b3e33..0311221 100644 --- a/lib/src/components/Select/Select.tsx +++ b/lib/src/components/Select/Select.tsx @@ -77,26 +77,28 @@ const SelectComponent: ForwardRefRenderFunction< useEffect(() => { if (isMulti) { - Array.isArray(selectValue) && - setInternalOptions( - options.filter( - (option) => !selectValue.find((data) => data.value === option.value) + Array.isArray(selectValue) + ? setInternalOptions( + options?.filter( + (option) => + !selectValue.find((data) => data.value === option.value) + ) ) - ); + : setInternalOptions(options); } else { setInternalOptions(options); selectValue ? !Array.isArray(selectValue) && setSearchText(selectValue?.label) : setSearchText(""); } - }, [selectValue, isMulti]); + }, [selectValue, isMulti, options]); useEffect(() => { focusElement(cursor); }, [cursor]); useEffect(() => { - if (internalOptions.length !== 0) { + if (Array.isArray(internalOptions)) { let skipCount = cursor; while (internalOptions[skipCount]?.disabled) { skipCount++; @@ -181,13 +183,13 @@ const SelectComponent: ForwardRefRenderFunction< const text = event.target.value; const mainOptions = isMulti && Array.isArray(selectValue) - ? options.filter( + ? options?.filter( (option) => !selectValue.find((data) => data.value === option.value) ) : options; setIsDropped(true); setSearchText(text); - const filteredOptions = mainOptions.filter((option) => { + const filteredOptions = mainOptions?.filter((option) => { return option.label .trim() .toLowerCase() @@ -233,6 +235,7 @@ const SelectComponent: ForwardRefRenderFunction< const checkIfAllValuesSelected = () => { return ( Array.isArray(selectValue) && + Array.isArray(options) && selectValue.length === options.length && options.every((el) => selectValue.find((data) => data.value === el.value)) ); @@ -285,10 +288,11 @@ const SelectComponent: ForwardRefRenderFunction< if (isDropped) { optionsList?.map((option) => { if (option.getAttribute("data-hover") === "true") { - const optionValue = internalOptions.find( - (arr) => arr.value === option.getAttribute("data-value") + const optionValue = internalOptions?.find( + (arr) => + JSON.stringify(arr.value) === option.getAttribute("data-value") ) as OptionsType; - !optionValue.disabled && internalClickHandler(optionValue, event); + !optionValue?.disabled && internalClickHandler(optionValue, event); } }); } else if (!isDropped) { @@ -298,51 +302,60 @@ const SelectComponent: ForwardRefRenderFunction< }; const focusNextOption = () => { - let skipStep = 1; - while ( + if (Array.isArray(internalOptions)) { + let skipStep = 1; + while ( + cursor + skipStep < internalOptions.length && + internalOptions[cursor + skipStep].disabled + ) { + skipStep++; + } cursor + skipStep < internalOptions.length && - internalOptions[cursor + skipStep].disabled - ) { - skipStep++; + setCursor(cursor + skipStep); } - cursor + skipStep < internalOptions.length && setCursor(cursor + skipStep); }; const focusPrevOption = () => { - let skipStep = 1; - while ( - cursor - skipStep >= 0 && - internalOptions[cursor - skipStep].disabled - ) { - skipStep++; + if (Array.isArray(internalOptions)) { + let skipStep = 1; + while ( + cursor - skipStep >= 0 && + internalOptions[cursor - skipStep].disabled + ) { + skipStep++; + } + cursor - skipStep >= 0 && setCursor(cursor - skipStep); } - cursor - skipStep >= 0 && setCursor(cursor - skipStep); }; const focusFirstOption = () => { - let skipStep = 0; - while ( - skipStep < internalOptions.length && - internalOptions[skipStep].disabled - ) { - skipStep++; - } - if (skipStep < internalOptions.length) { - setCursor(skipStep); - focusElement(skipStep); + if (Array.isArray(internalOptions)) { + let skipStep = 0; + while ( + skipStep < internalOptions.length && + internalOptions[skipStep].disabled + ) { + skipStep++; + } + if (skipStep < internalOptions.length) { + setCursor(skipStep); + focusElement(skipStep); + } } }; const focusLastOption = () => { - let skipStep = 1; - while ( + if (Array.isArray(internalOptions)) { + let skipStep = 1; + while ( + internalOptions.length - skipStep >= 0 && + internalOptions[internalOptions.length - skipStep].disabled + ) { + skipStep++; + } internalOptions.length - skipStep >= 0 && - internalOptions[internalOptions.length - skipStep].disabled - ) { - skipStep++; + setCursor(internalOptions.length - skipStep); } - internalOptions.length - skipStep >= 0 && - setCursor(internalOptions.length - skipStep); }; const inputKeyDownHandler = (event: KeyboardEvent) => { @@ -416,7 +429,7 @@ const SelectComponent: ForwardRefRenderFunction< alignItems="center" > {isMulti && - (Array.isArray(selectValue) && selectValue.length !== 0 + (Array.isArray(selectValue) ? selectValue?.map((arr, ind) => { return ( - {internalOptions.length !== 0 ? ( + {Array.isArray(internalOptions) && internalOptions?.length !== 0 ? ( internalOptions.map((option, ind) => { const selectListClass = selectListRecipe({ disabled: option.disabled,