I have tried everything I can think of, but I cannot prevent the placeholder in react-select from disappearing (I assume changed to display: none because it is no longer in the HTML) when a value is selected for the component.

I've read through both posts with similar issues:

But haven't found any success

My Styling on the placeholder element is:

valueContainer: base => ({
        overflow: 'visible'
      }),
placeholder: (provided, state) => ({
        ...provided,
        position: "absolute",
        marginTop: '-30px',
        display: 
      state.isFocused || state.isSelected || state.selectProps.inputValue || state.value
      ? 'block'
      : 'block',
      }),

Here is a stackblitz. The end goal is to start the placeholder in the center and move it up to the spot it is here on focus and selection. The problem is, once something is selected, the placeholder disappears.

I have tried everything I can think of, but I cannot prevent the placeholder in react-select from disappearing (I assume changed to display: none because it is no longer in the HTML) when a value is selected for the component.

I've read through both posts with similar issues: https://github.com/JedWatson/react-select/issues/2152 https://github.com/JedWatson/react-select/issues/2143

But haven't found any success

My Styling on the placeholder element is:

valueContainer: base => ({
        overflow: 'visible'
      }),
placeholder: (provided, state) => ({
        ...provided,
        position: "absolute",
        marginTop: '-30px',
        display: 
      state.isFocused || state.isSelected || state.selectProps.inputValue || state.value
      ? 'block'
      : 'block',
      }),

Here is a stackblitz. The end goal is to start the placeholder in the center and move it up to the spot it is here on focus and selection. The problem is, once something is selected, the placeholder disappears. https://stackblitz.com/edit/react-egf4va

• javascript
• css
• reactjs
• react-select
• react-state

• 1 can you please provide any stackblitz??? – Pallamolla Sai Commented May 19, 2020 at 17:01
• @PALLAMOLLASAI yes, Stackblitz added! Thank you! – singmotor Commented May 19, 2020 at 17:18
• seems the link you provided just keeps on loading that's it is not loading – Pallamolla Sai Commented May 19, 2020 at 17:26
• @PALLAMOLLASAI updated to the edit version of the stackblitz instead of the app. Sometimes the .io is blocked by my browser too. Let me know if that works better – singmotor Commented May 19, 2020 at 17:59

3 Answers 3

You need to create a custom ValueContainer, and return the Placeholder in it. Then pass it in property components on the Select component:

import React, { Component } from 'react';

import { render } from 'react-dom';
import Select, {components} from 'react-select';
import Hello from './Hello';
import './style.css';
const { ValueContainer, Placeholder } = components;

const CustomValueContainer = ({ children, ...props }) => {
  return (
    <ValueContainer {...props}>
      <Placeholder {...props} isFocused={props.isFocused}>
        {props.selectProps.placeholder}
      </Placeholder>
      {React.Children.map(children, child =>
        child && child.type !== Placeholder ? child : null
      )}
    </ValueContainer>
  );
};
class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React'
    };
  }

  render() {
    const customStyles = {
      container: base => ({
        ...base,
        width: '100%',
      }),
      control: base => ({
        ...base,
        border: 0,
        // This line disable the blue border
        boxShadow: 'none',
        height: '42px',
        borderRadius: '6px'
      }),
      valueContainer: base => ({
        ...base,
        fontSize: '15px',
        top: '3.5px',
        marginLeft: '4px',
        overflow: 'visible'
      }),
      placeholder: base => ({
        ...base,
        fontStyle: 'italic',
        marginTop: '20px',
        position: 'absolute',
      })
    }
    const options = [
     { value: 'chocolate', label: 'Chocolate' },
     { value: 'strawberry', label: 'Strawberry' },
     { value: 'vanilla', label: 'Vanilla' }
   ];
    return (

      <div>
        <Select components={{ValueContainer: CustomValueContainer}}
        options={options} placeholder="Select" isClearable="true" styles={customStyles} className="react-select" classNamePrefix="react-select"/>
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

Fixing float placeholder status "isFocused" in react-select component

const CustomValueContainer = ({ children, ...props }) => {
  return (
    <ValueContainer {...props}>
      <Placeholder {...props} isFocused={props.isFocused}>
        {props.selectProps.placeholder}
      </Placeholder>
      {React.Children.map(children, child =>
        child && child.key !== 'placeholder' ? child : null
      )}
    </ValueContainer>
  );
};

const SingleSelect = () => {
  const [focused, setFocused] = useState(false)
 
    return (
      <Select
        components={{
          ValueContainer: CustomValueContainer
        }}
        onFocus={() => setFocused(true)}
        onBlur={() => setFocused(false)}
        isFocused={focused}
        placeholder="My Cool Label and work Focused"
        styles={{
          placeholder: (base, state)=>({
            ...base,
            position: 'absolute',
            top:
                (state.hasValue || state.selectProps.inputValue || state.selectProps.isFocused) ? '-120%' : '0%',
            transition: 'top 0.2s, font-size 0.2s',
            fontSize:
                (state.hasValue || state.selectProps.inputValue || state.selectProps.isFocused) && 14,
        }),
        }}
      />
    );
  }

Set the initial state as null instead of an empty object.

Instead of this:

const [defectSelected, setDefectSelected] = useState({});

Use this:

const [defectSelected, setDefectSelected] = useState(null);