React-Select v5 Bug of 2 elements in SingleValue

Hello,

This is to report a specific bug only exists in v5. Same code shows differently between these two versions. No matter I do in terms of CSS, I cannot fix it. I currently reverted back to v4.3.1 so don’t have as much concern but unless this bug is fixed, React-Select will be a package that I and many other experiencing same bug cannot upgrade.

SingleValue = (props) => {
   return (
     <>
       <IconButton
         onClick={this.favoritePressed}
       >
         <FavoriteFilled />
       </IconButton>
       <input
         type="text"
       />
     </>
   );
 };

In a nutshell, I have icon for favoriting items listed in input list so user can favorite them. No matter what I do, second item go below first item. I wrap them with DIV and gave whole bunch of CSS properties still no help.

[DoneDeal0]

Hi, have you found a fix? I also have the same issue. The SingleValue component is not properly displayed anymore in V5. I’ve tried to put it in absolute position, but it hides the value!

Here is a basic example:

import { useState } from "react"
import Select from "react-select"

const options = [
  {value: "chocolate", label: "Chocolate"},
  {value: "vanilla", label: "Vanilla"}
]

export default function App() {
  const [v, setV] = useState(options[0])
  return (
     <div>
       <Select
            value={v}
            options={options}
            onChange={(option)=> setV(option)}
            components={{
                       SingleValue: ({data})=> <div>hello</div>
             }}
         />
    </div>
  );
}

The ugly rendering:

The SingleValue’s hello div is placed haphazardly.

[ebonow]

@anikolaev Agreed. This has been discussed and is on the roadmap, but also understand this could be a breaking change since the Input component has, for whatever reason, simply passed the extra props to the input element. Adding innerProps would standardize this behavior with the other components.

Another approach could be to add the tooltip as a wrapper around the children instead of the Input component.

const Input = ({ children, ...props }) => (
  <components.Input {...props}>
    <div style={{ border: `1px dotted ${colourOptions[2].color}` }}>
      <Tooltip content={'Custom Input'}>
       { children }
      </Tooltip>
    </div>
  </components.Input>
);