Allign multi select input with constants height

[bielas]

When you check more than some options from the dropdown the input make its height higher and higher which does not looks nice in the end. Is it somehow possible to make with maximum of height, lets say, 30px and if there are more options select instead of all values displayed, the number of how many options were selected or at least display some dots that can indicate that there are more options selected?

Below I paste how it looks like currently. The multi select it's not alligned any more with the rest of the inputs.

[csandman]

Unfortunately there's no straightforward answer I can give you for this. You can do some basic style changes like setting a max height on the control using chakraStyles but it causes some weird styles on the overflow:

<Select
  chakraStyles={{
    control: (provided) => ({
      ...provided,
      maxH: "40px",
    }),
  }}
/>

Something else you could do would be to set hideSelectedOptions={false} which would keep the selected options in the list to more easily remove selected options, but you're still left with a weird overflow in the select itself.

The only way to do the last thing you said where you show "and N other options" would be to make a custom component for it, and I don't really have a simple solution for that to give you.

[csandman]

I recently found somewhat of a solution to this problem, that I posted on a related posts, but I'll copy it here for visibility. My solution was to show a user defined quantity N tags and then show a fake tag with the label "N More Tags" after it to prevent the contents of the field from getting too long. I also have a note at the bottom about how this solution is not bulletproof to prevent line wrapping, but it's a start.

---

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.