tbleckert / react-select-search

⚡️ Lightweight select component for React
https://react-select-search.vercel.app
MIT License
682 stars 148 forks source link

Incorrect useSelect types #271

Open joe223 opened 3 months ago

joe223 commented 3 months ago

Describe the bug

type declaration in src/index.d.ts

export function useSelect(Options: {
    defaultValue?: string | string[];
    value?: string | string[];
    multiple?: boolean;
    search?: boolean;
    options?: SelectSearchOption[];
    onChange?: (
        selectedValue: SelectedOptionValue | SelectedOptionValue[],
        selectedOption: SelectedOption | SelectedOption[],
        optionSnapshot: SelectSearchProps,
    ) => void;
    getOptions?: (query: string) => Promise<SelectSearchOption[]>;
    useFuzzySearch?: boolean;
    filterOptions?: ((
        options: SelectSearchOption[],
        query: string,
    ) => SelectSearchOption[])[];
    allowEmpty?: boolean;
    closeOnSelect?: boolean;
    closable?: boolean;
    debounce?: number;
}): [
    Snapshot,
    {
        tabIndex: string;
        readOnly: boolean;
-      onChange: (
-          selectedValue: SelectedOptionValue | SelectedOptionValue[],
-           selectedOption: SelectedOption | SelectedOption[],
-           optionSnapshot: SelectSearchProps,
-       ) => void;
        disabled: boolean;
        onMouseDown: (event: MouseEvent) => void;
        onKeyDown: (event: KeyboardEvent) => void;
        onKeyUp: (event: KeyboardEvent) => void;
        onKeyPress: (event: KeyboardEvent) => void;
        onBlur: () => void;
        onFocus: () => void;
        ref: MutableRefObject<any>;
    },

but in src/useSelect.js

    const valueProps = {
        tabIndex: '0',
        readOnly: !search,
        placeholder,
        value: focus && search ? q : snapshot.displayValue,
        ref,
        ...keyHandlers,
        onFocus: (e) => {
            setFocus(true);
            onFocus(e);
        },
        onBlur: (e) => {
            setFocus(false);
            setSearch('');
            setHighlighted(-1);
            onBlur(e);
        },
        onMouseDown: (e) => {
            if (focus) {
                e.preventDefault();
                ref.current.blur();
            }
        },
+       onChange: search
+           ? ({ target }) => setSearch(target.value)
+           : null,
    };

To Reproduce Steps to reproduce the behavior:

  1. Go to '...'
  2. Click on '....'
  3. Scroll down to '....'
  4. See error

Expected behavior A clear and concise description of what you expected to happen.

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

Smartphone (please complete the following information):

Additional context Add any other context about the problem here.

joe223 commented 3 months ago

placeholder also has a problem.

I was wondering if we could rewrite it using TypsScript, so that all type declarations could be generated by tsc.

AlreNux commented 2 months ago

placeholder also has a problem.

I was wondering if we could rewrite it using TypsScript, so that all type declarations could be generated by tsc.

I think you should rewrite your project on TS, because now when you use useSelect (according to the example from ReadMe) or SelectSearch - you get typing errors immediately. That would be nice...