JedWatson / react-select

The Select Component for React.js
https://react-select.com/
MIT License
27.57k stars 4.12k forks source link

Wrong innerProps in MultiValueContainer since 5.7.0 #5834

Open Dron007 opened 9 months ago

Dron007 commented 9 months ago

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.

Dron007 commented 3 weeks ago

Why is this issue marked as bug-unconfirmed? I added a sandbox example, it is easy to verify that it is still broken in the latest versions. We can add some workarounds in our code but I would prefer some fix.