react-functional-select

react-functional-select copied to clipboard

Hi!

I updated from 3.3.3 to 5.0.0 v of the react-functional-select.

After this, I got an error:

This error occurred when the component with Select loaded before tests started. And I have no idea what happened and how to solve it. I use CRA, RTL, and Typescript.

Environment

Node: 16.17.0 npm: 8.15.0

npmPackages: "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "^5.0.1", "react-functional-select": "^5.0.0", "styled-components": "^5.3.5", "typescript": "^4.7.4", "@testing-library/jest-dom": "^5.16.4", "@testing-library/react": "^13.3.0", "@testing-library/user-event": "^14.2.1", "jest-styled-components": "^7.0.8",

And using:

const CustomSelect = (props: SelectProps) => {  
   // ....
    
        const getCaretIcon = ({ menuOpen }: IconState) => (
            <StyledCaretIconSelect active={menuOpen}>
                <CaretIcon className="select-caret-icon" />
            </StyledCaretIconSelect>
        );
        
        const getCrossIcon = () => (
            <>
                <CrosstIcon className="select-cross-icon" />
                <StyledSelectIconsDevider className="select-devider" />
            </>
        );

    const handleOnChange = useCallback((option: OptionData) =>  onChange(option), []);

    const getOptionValue = useCallback(
        (option: OptionData): number | string =>
            handleOptionValue(option),
        [],
    );

    const getOptionLabel = useCallback(
        (option: OptionData): number | string =>
            handleOptionLabel(option),
        [],
    );


    return (
            <Select
                initialValue={value}
                options={options}
                isInvalid={isInvalid}
                isSearchable={isSearchable}
                isClearable={isClearable}
                isDisabled={isDisabled}
                onOptionChange={handleOnChange}
                getOptionValue={getOptionValue}
                getOptionLabel={getOptionLabel}
                caretIcon={getCaretIcon}
                clearIcon={getCrossIcon}
                themeConfig={ThemeSelectFilter}
                required={required}
                placeholder={placeholder}
                hideSelectedOptions={false}
                menuItemSize={selectMenuItemSize}
                menuWidth={menuWidth}
            />
    );
};

export default CustomSelect;

and theme:

const ThemeSelectFilter: Partial<DefaultTheme> = {
    color: {
        border: 'transparent',
        danger: `${COLORS.warning}`,
        dangerLight: 'rgb(213 66 54 / 25%)',
        disabled: `${COLORS.background.disabled}`,
        placeholder: `${COLORS.text.light}`,
        iconSeparator: 'transparent',
    },
    icon: {
        padding: 0,
        css: css`
            svg {
                fill: ${COLORS.text.light};
            }

            .select-caret-icon {
                margin-bottom: 2px;
                width: 12px;
                height: 6px;
            }

            .select-cross-icon {
                margin-right: 10px;
                width: 10px;
                height: 10px;
            }
        `,
    },
    control: {
        minHeight: '20px',
        borderWidth: '1px',
        boxShadow: '0 0 0 0.18rem',
        boxShadowColor: 'transparent',
        focusedBorderColor: 'transparent',
        padding: '0px 10px 0px 3px',
        css: css`
            font-weight: 600;
            cursor: pointer;
        `,
    },
    menu: {
        padding: '8px',
        borderRadius: `${SIZES.border.radius}`,
        boxShadow: '0 2px 10px #00000029',
        option: {
            selectedColor: `${COLORS.text.main}`,
            selectedBgColor: 'transparent',
            padding: '5px 7px',
            focusedBgColor: 'transparent',
        },
    },
    noOptions: {
        fontSize: `${SIZES.typography.body1}`,
        margin: '0',
        color: `${COLORS.text.light}`,
        padding: '5px 7px',
    },
};

But, I also got this error even without theming.

Update: I set up a new clean project: Vite+React+Typescript+RTL, updated node and npm to the latest version and got the same error:

I think that the problem is somewhere in the library.