Question

85

Keeping placeholder on react-select

rated 0 times [ 88] [ 3] / answers: 1 / hits: 12195 / 4 Years ago, tue, may 19, 2020, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jonrened

Add To Favorites

Follow

Total Points: 627

Total Questions: 114

Total Answers: 99

Location: Zimbabwe

Member since Thu, Jul 21, 2022

2 Years ago

jonrened questions

1 Jest Received: serializes to the same string

Mon, Nov 2, 20, 00:00, 4 Years ago

1 How to show the first item by default in a dynamic Antd form?

Sat, May 16, 20, 00:00, 4 Years ago

1 querySelectorAll to include self

Tue, Jan 21, 20, 00:00, 4 Years ago

1 Compare two nested array and objects for find difference

Thu, Nov 7, 19, 00:00, 5 Years ago

1 Configure multiple transformers/resolvers using metro

Mon, Aug 26, 19, 00:00, 5 Years ago

View All

answered 4 Years ago margaritakristinak · Accepted Answer

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'));