React-select: Selected value only coming up as placeholder

Created on 28 Jan 2016 · 13Comments · Source: JedWatson/react-select

I am having an issues where the selected text is not coming up as a value selected, but as a placeholder. However, in the React component render function it will logChange with val as normal. I would like to get it to show up as a normal text color (darker). I am able to bypass this by updating the css to override the placeholder class color to #000. In this case, the placeholder will also be #000, which is not desirable. Please see the following, thanks!

In render function of React component:

const options = [
    { value: 'one', label: 'One' },
    { value: 'two', label: 'Two' }
];

function logChange(val) {
    console.log("Selected: " + val);
}

<Select
    name="selected-state"
    value="one"
    options={options}
    onChange={logChange}
/>

Index.html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="/assets/vendor/style/bootstrap-3.3.6.min.css" />
  <link rel="stylesheet" href="/assets/vendor/style/react-select.min.css" />
  <link rel="stylesheet" href="/style/style.css" />
  <link rel="shortcut icon" href="/assets/images/favicon.ico" />
  <script type="text/javascript" src="/assets/vendor/javascript/jquery-1.12.0.min.js"></script>
  <script type="text/javascript" src="/assets/vendor/javascript/bootstrap.js"></script>
  <title>Test</title>
</head>
<body>
<div id="main"></div>
  <script type="text/javascript" src="/bundle.js"></script>
</body>
</html>

package.json dependencies:

  "devDependencies": {
    "babel-core": "^6.4.5",
    "babel-eslint": "^4.1.6",
    "babel-loader": "^6.2.1",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "babel-preset-stage-1": "^6.3.13",
    "babel-root-import": "^3.1.0",
    "css-loader": "^0.23.1",
    "eslint": "^1.10.3",
    "eslint-config-airbnb": "^4.0.0",
    "eslint-plugin-react": "^3.15.0",
    "node-sass": "^3.4.2",
    "react-hot-loader": "^1.3.0",
    "sass-loader": "^3.1.2",
    "style-loader": "^0.13.0",
    "webpack": "^1.12.11",
    "webpack-dev-server": "^1.14.1"
  },
  "dependencies": {
    "events": "^1.1.0",
    "flux": "^2.1.1",
    "history": "^1.17.0",
    "react": "^0.14.6",
    "react-bootstrap": "^0.28.2",
    "react-dom": "^0.14.6",
    "react-router": "^2.0.0-rc5",
    "react-select": "^0.9.1"
  }

Screenshots:
Placeholder
screenshot 2016-01-28 10 45 55

Selected "One" issue (looks like placeholder and not like normal text):
screenshot 2016-01-28 10 46 10

Source

natation

Most helpful comment

Has this been fixed? Please
@javiersubiabre @tomascharad

frodrigueza on 6 Apr 2016

👍6

All 13 comments

I just played around with it works now! It seems like I should be using the react-select.min.css from dist. Is the best way to do this to include it in the head tag for as a link as I have done it? Is it possible to load it directly in the css using import? What are the pros and cons of importing css vs including it in the head tag? Thanks.

natation on 28 Jan 2016

I'm having a similar issue @natation. What did you do to fix the issue?

RocketPuppy on 4 Feb 2016

Hi @RocketPuppy, what is your setup? Make sure you using the react-select.min.css from the dist folder in node_modules.

natation on 4 Feb 2016

@RocketPuppy @natation I'm also seeing this issue, I'm using the min.css for what is worth. Any thoughts?

jbaxleyiii on 6 Feb 2016

Also seeing this

dvreed77 on 6 Feb 2016

I'm getting this issue too. I tried replacing my css with the master version from dist, but this didn't help.

dyerc on 8 Feb 2016

@dvreed77 @CD1212 @jbaxleyiii I was seeing this issue when I linked https://github.com/JedWatson/react-select/blob/master/examples/dist/example.css in the head tag instead of linking the react-select.min.css from the dist folder. However, when I replaced the link to link to the one from the dist folder, it worked fine.

natation on 9 Feb 2016

This is not a css problem. There is a bug in the component. The tag structure is wrong. When there is a value selected, the current structure looks like:

<div class="Select is-searchable has-value">
    <input type="hidden" name="selected-state" value="western-australia">
    <div class="Select-control">
        <!--- placeholder div should not be here -->
        <div class="Select-placeholder" title="">Western Australia</div>
        <div class="Select-input " style="display:inline-block;">
            <input value="" style="width: 5px; box-sizing: content-box;">
            <div style="position: absolute; visibility: hidden; ..."></div>
        </div>
        <span class="Select-clear-zone" title="Clear value" aria-label="Clear value">
            <span class="Select-clear">x</span>
        </span>
        <span class="Select-arrow-zone">
            <span class="Select-arrow"></span>
        </span>
    </div>
</div>

But it should look like:

<div class="Select is-searchable has-value">
    <input type="hidden" name="selected-state" value="western-australia">
    <div class="Select-control">
        <!-- Select-value div should be there -->
        <div class="Select-value ">
            <span class="Select-value-label">Western Australia</span>
        </div>
        <div class="Select-input" style="display:inline-block;">
            <input value="" style="width: 5px; box-sizing: content-box;">
            <div style="position: absolute; visibility: hidden; ..."></div>
        </div>
        <span class="Select-clear-zone" title="Clear value" aria-label="Clear value">
            <span class="Select-clear">x</span>
        </span>
        <span class="Select-arrow-zone">
            <span class="Select-arrow"></span>
        </span>
    </div>
</div>

If the structure were correct, the css as provided would work as intended. The correct tag structure was taken from the react-select demo page. So whatever version of react-select the demo page is using doesn't have this bug.

voidstardb on 15 Feb 2016

Has this been fixed? Please
@javiersubiabre @tomascharad

frodrigueza on 6 Apr 2016

👍6

Very interested in this as well...

cp on 18 Apr 2016

👍2

interested as well!

jingister on 25 May 2016

👍1

@JedWatson it looks like the example on the readme doesn't work! Do you know what version is being used on the demo website?

Wilfred on 3 Aug 2016

Hello -

In an effort to sustain the react-select project going forward, we're closing old issues / pull requests.

We understand this might be inconvenient but in the best interest of supporting the broader community we have to direct our limited efforts to maintain the latest version.

If you feel this issue / pull request is still relevant and you'd like us to review it, please leave a comment and we'll do our best to get back to you.