JedWatson / JedWatson/react-select

Wrong innerProps in MultiValueContainer since 5.7.0

Open
#5,834 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

issue/bug-unconfirmed
Dominant language
TypeScript
Stars
28k
Forks
4.1k
PR merge metrics
No merged PRs in 30d

Description

After upgrading react-select from v5.6.1 to v5.8.0 I noticed that remove buttons in multiselect values are wrapped.
image
Here is the simplified code

import React from "react";
import Select from "react-select";

const optionsArray = [
  { value: "o1", label: "option 1" },
  { value: "o2", label: "option 2" },
];

const MultiValueContainer = (props) => {
  console.log("props:", props);
  // this one works
  // return <div style={{ ...props.innerProps?.css }}>{props.children}</div>;

  return <div {...props.innerProps}>{props.children}</div>;
};

export default () => (
  <Select
    isMulti
    components={{ MultiValueContainer: MultiValueContainer }}
    value={[{ value: "o1", label: "option 1" }]}
    options={optionsArray}
  />
);

Here is the sandbox: https://codesandbox.io/p/sandbox/codesandboxer-example-forked-k5mjlq
The breaking change was introduced somewhere here.

InnerProps had className in 5.6.1 but in 5.7.0 it has empty className and css object with styles which is ignored in my code. I can change the code as you may see in commented lines but I am not sure it is correct way. It is not documented.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the MultiValueContainer implementation and the 5.6.1–5.7.0 comparison linked in the issue, then reproduce the behavior in the provided CodeSandbox. Determine the intended innerProps behavior for custom multiselect values; done when the remove button is not incorrectly wrapped and the expected usage is documented or verified.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.