tanstack / select Goto Github PK

https://tanstack.com/select is no longer working and no documentation can be found for this package :/

Hi, I try to test your hook in Next.js but I got this error. Could you ship your hook in a none transpiled version too?

ReferenceError: regeneratorRuntime is not defined
useDebounce
/mnt/ssd/repositories/test/ui/node_modules/use-select/dist/index.js:193:3
useSelect
/mnt/ssd/repositories/test/ui/node_modules/use-select/dist/index.js:392:27
MySelect
./components/MySelect.js:10
   7 | const optionsRef = useRef();
   8 | 
   9 | // Use useSelect to manage select state
> 10 | const {
     | ^  11 |   visibleOptions,
  12 |   selectedOption,
  13 |   highlightedOption,

I have everything working with use-select except the search.

When I use the setSearch function like so:

<input
    type="text"
    name="search"
    autoComplete="off"
    onChange={(e) => {
      setSearch(e.target.value);
    }}
    className="focus:ring-indigo-500 focus:border-indigo-500 block w-full pl-9 sm:text-sm border-gray-300 rounded-md"
    placeholder="Search"
  />

visibleOptions always returns an empty array, no matter what I search for.

Also I try to override the filterFn like so:

  const searchFilter = (options, searchValue) => {
    console.log(options, searchValue);
    return options;
  };
const {
    visibleOptions,
    selectedOption,
    getInputProps,
    getOptionProps,
    isOpen,
    setOpen,
    setSearch,
    searchValue,
  } = useSelect({
    multi: true,
    options,
    value,
    onChange,
    optionsRef,
    filterFn: (options, searchValue) => searchFilter(options, searchValue),
  });

the searchFilter function is never called (it never logs anything).

Just want to say thank you so much for made this dont understand why this pack dont have many stars.
Btw can i use async api with use select?

thanks for your good hook

would you want to add a typescript definition to it or convert it to typescript fro base?

I would be happy to do that with a PR

The "virtualised" list feature definitely makes sense for big lists. However, compared to e.g. react-virtualised this behaviour feels very sluggish/slow, even if you are just hovering over individual options in the list (might be also just me).

I assume it might be difficult to optimise the "virtualised" list, i.e. react-window, but simpler to disable this functionality for e.g. smaller lists. Should this be an option?

Love what you do, just wish that your codepen examples had less 3rd party deps.

☮️

h

Hi I just want custom for all input tag, div,... but I just want use class name. I try to remove styled-components but it will be error... Can you please make a super simple of this?

Hey, thanks for the wonderful library. I could almost solve all my usecases. I found a few bugs and improvements that are possible.

Bugs:

1. highlightedOption is mentioned in the API, but it is not currently exposed. It is missed in this commit during the reimplementation with index.

2. In the Docs, there is a small typo

Improvements:

1. Currently, the entire options list is filtered and the result is shown. I would like to add another behaviour where instead of filtering, the list would scroll to the actual index of the first matching element. This is also a widely used approach (react-select) and I believe this would not degrade any existing functionality.

2. Having a ghost element that populates the label of the selected element.
   

This also can be achieved through a prop without degrading the existing functionality.

Please let me know if these are aligned with your vision for this library. If so we can discuss about the props and I can raise a PR as needed. Thanks