Help with making it scrollable on many items

[M1z23R]

Hi, first of all, great project.
I need help (guidance) in customizing the component to make it more compact size wise.

Here is a screenshot which I think will explain a lot:

I want to be able to make it fixed size (something like rows:5 + resize:none property in textarea. I am not even sure where should I start so any help would be appreciated.

[M1z23R]

I forgot one more thing to mention - I am using CreatableSelect

[csandman]

I'm not gonna lie, that image made me laugh. Honestly, chakra-react-select might not be the best use case for what you're trying to do. But if you're set on it, you're probably better off not displaying the selected options inside the field itself. This can easily be turned off by setting the prop controlShouldRenderValue={false}.

From there, as long as you're keeping track of your selected options with a state value, you can render them however you want nearby.

Something like this:

Here's a complete example of how you might accomplish this: https://codesandbox.io/s/v65hnp?file=/app.tsx

[M1z23R]

Yep, this is exactly what I needed. Thanks a lot, I can go on from here to further modify it to my needs.

[csandman]

Glad it helped!

On a side note, if you're going to do your own custom view, you'll probably want to include some other method for removing options.

One possible way is just to include your own clear button for the custom view, something like this:

const removeCountry = (countryOption: CountryOption) => {
  setSelectedCountries((prevSelectedCountries) =>
    prevSelectedCountries.filter(
      (country) => country.value !== countryOption.value
    )
  );
};

Or including the hideSelectedOptions={false} prop so the option in the list can be clicked again to be deselected.

I updated my example to demonstrate both of those potential strategies!