Remove tags from multiselect

[albinomn]

Is there a way to remove the tag when I'm using multiselect?

I tried to use the suggestion from #179 but it get's weird

[csandman]

I'm not sure what you mean, do you want to not show the selected options at all? Or show them in a more compact way?

[csandman]

Alternatively you could provide a custom component for MultiValue that returns null:

const customComponents = {
  MultiValue: () => null
}

const MyComponent = () => (
  <Select
    isMulti
    hideSelectedOptions={false}
    components={customComponents}
  />
)

[albinomn]

Hmm, I was trying to limit at 3 and put a tag counting at the end

With this customComponents it can be done, right?

Or just leave one message or placeholder

[elizabethfrerichs]

Hi, I tried the first method, and I like it but I want to know if there is a way to remove the X button, as well- X button that allows the user to reset the select values. I want to render that button outside of the select component.

I just did

const components = {
    ClearIndicator: (props)=> null,
}

<FormSelect   
    name={name}
    options={options}
    isMulti={true}
    hideSelectedOptions={false}
    chakraStyles={{
      multiValue: () => ({ display: "none" })
    }}
    components={components}
/>

[csandman]

@elizabethboterf Sure, that's pretty easy to accomplish. That is, if I understand you correctly and you're saying you want to keep the tags for the selected options and just hide their clear buttons.

For removing the top level clear button, that can be done by simply adding the prop isClearable={false} to your component.

To remove the clear button from each individual tag, that can be done in two ways. The first is similar to what you have here, except your components would be for the MultiValueRemove component:

const components = {
  MultiValueRemove: () => null
};

<FormSelect
    components={components}
/>

Alternatively, you could use chakraStyles to do the same, just use multiValueRemove instead of multiValue.

<FormSelect
    chakraStyles={{
      multiValueRemove: () => ({ display: "none" })
    }}
/>

Here's an example: https://codesandbox.io/s/j7yxhl?file=/app.tsx

[csandman]

@albinomn Hmm, I was trying to limit at 3 and put a tag counting at the end

With this customComponents it can be done, right?

Hey, I know this question was from a while ago but I recently had to implement something like this for my company's production application, so after some trial and error I found what I believe to be a good solution. And hopefully if anyone else comes across this thread it can help them as well.

My trick was to use react's Children.map function to render the custom tags in the ValueContainer, ending with a custom tag that displays "N More Tags". This took me a while to figure out, as the last child in this container is the InputContainer, which we still want to render, is truncated if I just stop rendering all tags after a certain point, so we have to basically only render the first X children, then a custom one, then the last one. Here's a full example of a custom ValueContainer that can accomplish this:

const MAX_DISPLAY_TAGS = 3;

const ValueContainer = ({
  children,
  ...props
}: ValueContainerProps<StateOption, true>) => {
  const selectedCount = props.getValue().length;
  const overflowCount = selectedCount - MAX_DISPLAY_TAGS;

  return (
    <chakraComponents.ValueContainer {...props}>
      {Children.map(children, (child, childIndex) => {
        // We need to include the InputContainer, which is the last child
        // so only replace children after index 4 and before the last child
        if (childIndex !== selectedCount) {
          if (childIndex === MAX_DISPLAY_TAGS) {
            return <Tag m={0.5}>{overflowCount} More States</Tag>;
          }
          if (childIndex > MAX_DISPLAY_TAGS) {
            return null;
          }
        }
        return child;
      })}
    </chakraComponents.ValueContainer>
  );
};

This produces something that looks like this:

And here's a full CodeSandbox example: https://codesandbox.io/s/vpnzhd?file=/app.tsx

---

Something to note for this solution, if the goal is to never have the tags wrap to the next line, this won't really guarantee that. To be sure it will never wrap, you'd have to make sure that the longest X (however many your max is) tag labels selected will never be longer than their container. This is difficult to guarantee on a mobile layout especially, unless your limit is to only display one real tag followed by a tag count.