Reactjs Meteor application "Why is select dropdown not visible?"

Question

I am developing an application using React and Meteor. I have tried multiple syntax variations of the select dropdown but it's not visible.

The code is written in a jsx page. Below is my code snippet. Any help in identifying the issue is appreciated. I have tried viewing the output on Chrome and Safari, but the select dropdown is not showing up in both.

When I inspected using browser tools, the html tag select was present in source but it was not rendering on screen.

import React, { Component } from 'react';


export default class New extends Component {
  render() {
    return (
      <div className="row">
        <form className="col s12">
          <h3>Add a new player</h3>

          <div className="row">
            <div className="input-field col s6">

              <input placeholder="Name" ref="name" type="text" 
                className="validate" />
            </div>
            <div className="input-field col s6">
              <input placeholder="Team" ref="team" type="text" 
                className="validate" />
            </div>
          </div>

          <div className="row">
            <div className="input-field col s6">
              <h5>Ball Manipulation</h5>
              <select className="browser-default" 
                ref="ballManipuation">
                <option value="0">0 - Hasn't demonstrated skills</option>
                <option value="1">1 - Needs improvement</option>
                <option value="2">2 - Skill acquired</option>
                <option value="3">3 - Great skills/could teach</option>
              </select>
            </div>

            <div className="input-field col s6">
              <h5>Kicking Abilities</h5>
              <select name="cars">
                <option value="volvo">Volvo</option>
                <option value="saab">Saab</option>
                <option value="fiat">Fiat</option>
                <option value="audi">Audi</option>
              </select>
            </div>
          </div>

          <div className="row">
            <div className="input-field col s6">
              <textarea placeholder="Notes" ref="notes" type="text" 
                className="materialize-textarea" />
            </div>
            <div className="input-field col s6">
              <button className="btn waves-effect waves-light" type="submit" 
                name="action">Submit
                <i className="material-icons right">send</i>
              </button>
            </div>
          </div>

        </form>
      </div>
    )
  }
}

Done i have edited my question with the entire react component — user3804335, Aug 11 '17 at 15:56
I think the issue might be with react render the select tag. The select tag seems to be working fine in a html file but in jsx file with react it doesnt render — user3804335, Aug 11 '17 at 16:05
@user3804335 what is the "vfsvdsooooo" after your first select a typo? — Petter Friberg, Aug 11 '17 at 16:07
Tried put the component into my react project, it is working, just that part of the `
` is hidden on the left edges, I removed all the classname for row and col, and it works perfectly on my side. — Jacky Choo, Aug 11 '17 at 17:02
I removed all the classname for row and col and it seems to be working fine now. Thank You — user3804335, Aug 21 '17 at 20:23

score 0 · Answer 1 · answered Aug 11 '17 at 16:13

There is a typo in your component as @Peter pointed out under the comments.

          <select className="browser-default" 
            ref="ballManipuation">
            <option value="0">0 - Hasn't demonstrated skills</option>
            <option value="1">1 - Needs improvement</option>
            <option value="2">2 - Skill acquired</option>
            <option value="3">3 - Great skills/could teach</option>
          </select>

About that <select> in JSX, actually the tag is recognized in JSX. Here is an additional tip on <select> under JSX.

score 0 · Answer 2 · answered Aug 11 '17 at 16:22

0

You didn't initialize your Materalize select boxes (docs).

Try adding the initialization code to componentDidMount():

import ReactDOM from 'react-dom';

// ...

  componentDidMount() {
    var element = ReactDOM.findDOMNode(this.refs.ballManipuation)

    $(element).ready(function() {
      $('select').material_select();
    });
  }

  render() {
    // ...
  }

answered Aug 11 '17 at 16:22

Nelson Yeung

3,262
3
19
29

even if i remove the ref the static dropdown should be visible. but the static dropdown is not visible. I tried adding the initialization code didn't work – user3804335 Aug 11 '17 at 17:01
@user3804335 If you remove the ref, it'll definitely not show. You didn't remove the `ref="ballManipuation"` when you've tried my code right? Just want to confirm if you remove the classes `input-field` and `browser-default`, does your selectbox show? – Nelson Yeung Aug 11 '17 at 17:08

score 0 · Answer 3 · edited Sep 19 '17 at 00:38

You can delete the input-field property

Instead of

           <div className="input-field col s6">
                  <h5>Kicking Abilities</h5>
                  <select name="cars">
                    <option value="volvo">Volvo</option>
                    <option value="saab">Saab</option>
                    <option value="fiat">Fiat</option>
                    <option value="audi">Audi</option>
                  </select>
                </div>
              </div>

use

                <div className="col s6">
                  <h5>Kicking Abilities</h5>
                  <select name="cars">
                    <option value="volvo">Volvo</option>
                    <option value="saab">Saab</option>
                    <option value="fiat">Fiat</option>
                    <option value="audi">Audi</option>
                  </select>
                </div>
              </div>

Reactjs Meteor application "Why is select dropdown not visible?"

3 Answers3