React Select - Multi Select custom way to display multiple options

Question

I am looking to customize the multiselect and the way we create the display of showing selected options.

Right now, with many options selected the select component takes up a prohibitive amount of space for certain UIs. See example:

I'd like to utilize the out of the box chip display for selected options within the input, but I only want to show only a few selected options (like 3/4 max) and then add a "badge" count for the number of selected options that aren't shown in the value container in the input. The options that are selected but are past the max number of chips allowed to show in the input should show as selected within the dropdown list, while the chips that do show's values should not show in our dropdown.

I've implemented part of this with using a custom ValueContainer to show only the first few chip selections, and then adding a count of additional/"overflow" selections. I'm unsure of how I can utilize the prop hideSelectedOptions to achieve this to show selected items in the list only when my max is met without showing all of them since this prop takes a boolean.

Here's what I have so far: https://codesandbox.io/s/custom-react-select-sjtib


import React, { Component } from "react";
import Select, { components } from "react-select";
import { colourOptions } from "./docs/data";
import "./example.css";

class CustomSelect extends Component {
  state = {
    values: []
  };

  handleChange = values => {
    this.setState({ values });
  };

  render() {
    const { values } = this.state;
    return (
      <div>
        <Select
          hideSelectedOptions={values.length < 3 ? true : false}
          isMulti
          options={colourOptions}
          onChange={this.handleChange}
          value={values}
          components={{ ValueContainer }}
        />
      </div>
    );
  }
}

export default CustomSelect;

const ValueContainer = ({ children, getValue, ...props }) => {
  let maxToShow = 3;
  var length = getValue().length;
  let displayChips = React.Children.toArray(children).slice(0, maxToShow);
  let shouldBadgeShow = length > maxToShow;
  let displayLength = length - maxToShow;

  return (
    <components.ValueContainer {...props}>
      {!props.selectProps.inputValue && displayChips}
      <div className="root">
        {shouldBadgeShow &&
          `+ ${displayLength} item${length != 1 ? "s" : ""} selected`}
      </div>
    </components.ValueContainer>
  );
};

Any solution? Looking for it too.

jpcmf
– jpcmf

2020-02-16 01:14:52 +00:00
Commented Feb 16, 2020 at 1:14 — jpcmf
– jpcmf, Commented Feb 16, 2020 at 1:14
@jpcmf80 stackoverflow.com/a/65342821/1133169

Jakub
– Jakub

2020-12-17 14:43:08 +00:00
Commented Dec 17, 2020 at 14:43 — Jakub
– Jakub, Commented Dec 17, 2020 at 14:43

cohnred · Accepted Answer · 2019-11-16 09:04:52Z

4

I would personally keep hideSelectedOptions={false} and go for styles property usage (options property to be more exact) and setting display: 'none' for the ones which shouldn't be visible:

const styles = {
    option: (base, value) => {
        return (shouldBeShown(value) ? { ...base } : { display: 'none'});
    }
};

shouldBeShown(value) is a custom function for checking if the particular option should be shown. In order to get option data you can use value.data.

Then you can set styles={styles} in Select component:

<Select
    hideSelectedOptions={false}
    isMulti
    styles={styles}
    onChange={this.handleChange}
    options={options}
    value={values}
    components={{ ValueContainer }}
/>

answered Nov 16, 2019 at 9:04

cohnred

1012 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React Select - Multi Select custom way to display multiple options

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related