Managing style and state across keys (multiValue clear on click)

[jcamato]

Is it possible to adjust the functionality and style of multiValue to be a combination of multiValueLabel and multiValueRemove? Essentially I want to make the whole chip act as the remove button on click while still showing the label. Is there a way to customize the state interactions across different keys? I image only multiValueRemove owns the logic for clearing values. Here is my example:

example.mov

[manjushsh]

Hi @jaakerisalu please check if this works for you
Code Sandbox

Code:

import React from "react";
import { createRoot } from "react-dom/client";
import Select, { components } from "react-select";
import "./styles.css";

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { selectedOption: "" };
  }

  options = [
    { value: "Spring", label: "Spring" },
    { value: "Summer", label: "Summer" },
    { value: "Autumn", label: "Autumn" },
    { value: "Winter", label: "Winter" }
  ];

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

  onChipClick = (chipData) =>
    this.setState({
      selectedOption: this.state.selectedOption.filter(
        (opt) => opt !== chipData
      )
    });

  render() {
    return (
      <div className="container">
      
        <div className="customized-select">
          <h2>Second Select with data remove on label click</h2>
          <Select
            components={{
              // ...animatedComponents,
              MultiValueRemove,
              MultiValueLabel
            }}
            isMulti
            value={this.state.selectedOption}
            onChange={this.handleChange}
            options={this.options}
            onChipClick={this.onChipClick}
          />
        </div>
      </div>
    );
  }
}

const container = document.getElementById("app");
const root = createRoot(container); // createRoot(container!) if you use TypeScript
root.render(<MyComponent />);

// Custom components for second select
const MultiValueRemove = (props) => null;

const MultiValueLabel = (props) => {
  // console.warn("Props ", props, props.selectProps.value);
  return (
    <div
      onClick={() => props.selectProps.onChipClick(props.data)}
      className="muti-value-label badge rounded-pill bg-warning text-dark"
    >
      <components.MultiValueLabel {...props} />
    </div>
  );
};

It opens drop down on remove though

[jcamato]

This is a step in the right direction, thank you! I'll play around with trying to not have the dropdown open.

[jcamato]

@manjushsh my first thought is extending the clickable area of multiValueRemove over the whole chip, but then I don't think you would be able to have hover state over the label part to style that. Maybe a custom component of multiValueRemove that also displays label inside it and then multiValueLabel is not rendered 🤷‍♂️

[manjushsh]

Yeah that works better. And it also solves drodown open issue..
@jcamato here you go!

import React from "react";
import { createRoot } from "react-dom/client";
import Select, { components } from "react-select";
import "./styles.css";

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { selectedOption: null };
  }

  options = [
    { value: "Spring", label: "Spring" },
    { value: "Summer", label: "Summer" },
    { value: "Autumn", label: "Autumn" },
    { value: "Winter", label: "Winter" }
  ];

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

  render() {
    return (
      <div className="container">
        
        <div className="customized-select">
          <h2>Second Select with data remove on label click</h2>
          <Select
            components={{
              MultiValueRemove,
              MultiValueLabel
            }}
            isMulti
            value={this.state.selectedOption}
            onChange={this.handleChange}
            options={this.options}
            styles={customStyles}
          />
        </div>
      </div>
    );
  }
}

const container = document.getElementById("app");
const root = createRoot(container); // createRoot(container!) if you use TypeScript
root.render(<MyComponent />);

// Custom components for select
const MultiValueRemove = (props) => {
  return (
    <components.MultiValueRemove {...props}>
      <div className="muti-value-label">
        {props.data.label}
      </div>
    </components.MultiValueRemove>
  );
};

const MultiValueLabel = (props) => null;

// Styles
const customStyles = {
  multiValueRemove: (provided) => {
    return {
      ...provided,
      padding: "10px 10px",
      backgroundColor: "rgba(255, 200, 2, 0.704)",
      textDecoration: "none",
      ":hover": {
        backgroundColor: "red",
        color: "white",
        textDecoration: "line-through"
      },
      cursor: "pointer"
    };
  }
};

[jcamato]

@manjushsh wow you got it, thank you! I am still new to react-select so this helps me out a ton 👍

[manjushsh]

Glad that it helped 😃