Multi Select: display only selected items count after x number of items are selected/shown in chips

I was trying to do the same in an AsyncSelect and I managed to create a solution based on @ebonow 's solution.

So, I’m sharing a partial example of what I did to make it work, because this might help others:

import React from 'react';
import AsyncSelect from 'react-select/async';
import { components } from 'react-select';

const LimitedChipsContainer = ({ children, hasValue, ...props }) => {
  if (!hasValue) {
    return (
      <components.ValueContainer {...props}>
        {children}
      </components.ValueContainer>
    );
  }

  const CHIPS_LIMIT = 2;
  const [chips, otherChildren] = children;
  const overflowCounter = chips.slice(CHIPS_LIMIT).length;
  const displayChips = chips.slice(overflowCounter, overflowCounter + CHIPS_LIMIT);

  return (
    <components.ValueContainer {...props}>
      {displayChips}

      {overflowCounter > 0 && `+ ${overflowCounter}`}

      {otherChildren}
    </components.ValueContainer>
  );
};

export default ({ loadOptions, placeholder, ...selectSearchProps }) => (
  <AsyncSelect
    className="select-search"
    classNamePrefix="select-search"
    placeholder={placeholder}
    loadOptions={loadOptions}
    hideSelectedOptions={false}
    isMulti
    components={{ ValueContainer: LimitedChipsContainer }}
    {...selectSearchProps}
  />
);

The trick here is to understand that the first child of the ValueContainer is the array of selected options when the input has values. With this in mind, I could just make a slice (in my case showing the last two selected options) and return the chips, the counter and the remaning children after it.

But, do notice this: when the hasValue returns false you can’t do a slice because the first child is not the array of selected options. Hence the guard-clause.

Hope this helps.

I noticed that there was a bug so I made an update to the above sandbox to instead use the MultiValue instead of the ValueContainer.

https://codesandbox.io/s/custom-visible-multivalues-8zh8c?file=/example.js

const MoreSelectedBadge = ({ items }) => {
  const style = {
    marginLeft: "auto",
    background: "#d4eefa",
    borderRadius: "4px",
    fontFamily: "Open Sans",
    fontSize: "11px",
    padding: "3px",
    order: 99
  };

  const title = items.join(", ");
  const length = items.length;
  const label = `+ ${length} item${length !== 1 ? "s" : ""} selected`;

  return (
    <div style={style} title={title}>
      {label}
    </div>
  );
};

const MultiValue = ({ index, getValue, ...props }) => {
  const maxToShow = 3;
  const overflow = getValue()
    .slice(maxToShow)
    .map((x) => x.label);

  return index < maxToShow ? (
    <components.MultiValue {...props} />
  ) : index === maxToShow ? (
    <MoreSelectedBadge items={overflow} />
  ) : null;
};

const App = () => {
  return <Select components={{ MultiValue }} {...otherProps} />
}