How do I keep the Placeholder in this React-Select Drop Down Menu Untill a User Selects Option?

Question

Currently need the placeholder to remain the placeholder until a user chooses an option, however at the moment the placeholder is removed as soon as the user clicks the dropdown box for options.

How can I keep it there until a user chooses an option?

In this code?

<Select
                    styles={customStyles}
                    class='flag-drop-down'
                    options={customOptions}
                    placeholder={<img src={GBSVG} alt="Flag" width="24" height="16" />}
                    isSearchable={false}
                    noOptionsMessage={() => <img src={GBSVG} alt="Flag" width="24" 
                    height="16" />}
/>

Any help is greatly appreciated.

Thanks in advance!

Jake

Answer 1

Below is the example code from the official documentation, found under the Control section, if it is of any help. You might need to create a custom ValueContainer and return the placeholder in it.

import React from 'react';

import Select, { components, ControlProps } from 'react-select';
import { ColourOption, colourOptions } from '../data';
const controlStyles = {
  border: '1px solid black',
  padding: '5px',
  background: colourOptions[2].color,
  color: 'white',
};

const ControlComponent = (props: ControlProps<ColourOption, false>) => (
  <div style={controlStyles}>
    <p>Custom Control</p>
    <components.Control {...props} />
  </div>
);

export default () => (
  <Select
    defaultValue={colourOptions[0]}
    isClearable
    components={{ Control: ControlComponent }}
    isSearchable
    name="color"
    options={colourOptions}
  />
);

Also, there is a similar question you can have a look at Keeping placeholder on react-select.