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.

Selected value only coming up as placeholder

See original GitHub issue

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

Issue Analytics

State:
Created 8 years ago
Comments:13 (1 by maintainers)

Top GitHub Comments

6reactions

frodriguezacommented, Apr 6, 2016

Has this been fixed? Please @javiersubiabre @tomascharad

2reactions

cpcommented, Apr 17, 2016

Very interested in this as well…

Top Results From Across the Web

How do I make a placeholder for a 'select' box? - Stack Overflow

I suggest to use the hidden attribute for the placeholder option, and you don't need the selected attribute for this option. You can...

How to Create a Placeholder for an HTML5 <select> Box

First, you need to create your select items with the help of the <option> tag. Then, set the disabled and selected attributes for...

Select show placeholder even if there are options pre-select

First option is your placeholder. It value should be empty and it should have disabled and selected attributes. Between <option></option> tags you ...

How to Make a Placeholder for a Select Box in HTML

Answer: Use the disabled and selected Attribute. There is no attribute like input's placeholder for select box dropdown. However, you can create similar...

Placeholders - The jQuery replacement for select boxes

For single selects only, in order for the placeholder value to appear, you must have a blank <option> as the first option in...