Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

React-Select v5 Bug of 2 elements in SingleValue

See original GitHub issue


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. v5 v4 3 1

SingleValue = (props) => {
   return (
         <FavoriteFilled />

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.

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:6

github_iconTop GitHub Comments

DoneDeal0commented, Oct 27, 2022

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 (
            onChange={(option)=> setV(option)}
                       SingleValue: ({data})=> <div>hello</div>

The ugly rendering: Screenshot 2022-10-27 at 14 36 31

The SingleValue’s hello div is placed haphazardly.

ebonowcommented, Oct 28, 2021

@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 }
Read more comments on GitHub >

github_iconTop Results From Across the Web

Error when using two react-select dropdown - how to fix?
Try to verify which elements have the duplicate Id, open your browser and go to inspect element and search in your forms for...
Read more >
API - React Select
The statemanager is a utility class that wraps around the base Select and each Select variant to expose inputValue and value as controllable...
Read more >
Uncontrolled Components - React
For example, this code accepts a single name in an uncontrolled component: ... In the React rendering lifecycle, the value attribute on form...
Read more >
react-select - npm
With React Component ; from 'react-select'; ; value · 'strawberry', ;; class App ; handleChange = ( ; => console.
Read more >
react-select-no-emotion/ - UNPKG
62, * [#3216] Fixes bug where clearing with backspace in a single select would ... `css` attribute being wrongly applied to a DOM...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found