Materialize css --select-- not working in react

Question

I am using basic materialize css and for some reason even if I copy it straight from the materializecss.com website my select option just shows the label and nothing else is there.

EDIT added index.hjs page for reference of scripts.

In my index.hjs here are all my imports for the materialize css:

<!DOCTYPE html>
<html>

<head>
  <title>{{ title }}</title>
  <link rel='stylesheet' href='/stylesheets/style.css' />
  <!--Import Google Icon Font-->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <!--Import materialize.css-->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
  <!--Let browser know website is optimized for mobile-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

</head>

<body>
  <div id="root"></div>

  <!--Import jQuery before materialize.js-->
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
  <script type="text/javascript" src="/build/bundle.js"></script>
</body>

</html>

Here is the code:

      <div>
        <div className="row">
          <div className="input-field col s12 m6">
            <input
              onChange={this.updateTask.bind(this)}
              id="title"
              type="text"
            />
            <label htmlFor="title">Title</label>
          </div>
        </div>
        <div className="row">
          <div className="input-field col s12 m6">
            <input
              onChange={this.updateTask.bind(this)}
              id="description"
              type="text"
            />
            <label htmlFor="description">Description</label>
          </div>
        </div>
        <div className="row">
          <div className="input-field col s12">
            <select id="category" onChange={this.updateTask.bind(this)}>
              <option value="" disabled selected>
                Choose your category
              </option>
              <option value="delivery">Delivery</option>
              <option value="dog walking">Dog Walking</option>
              <option value="house cleaning">House Cleaning</option>
            </select>
            <label>Category</label>
          </div>
        </div>
        <div className="row">
          {/* <button
            onClick={this.submitTask.bind(this)}
            className="btn waves-effect waves-light"
            >
            Submit
            <i className="material-icons right">send</i>
          </button> */}
        </div>
      </div>

I have the jquery and js scripts already, added page in the edits, I meant select not drop down. — Taylor Austin
– Taylor Austin, Commented Sep 21, 2017 at 14:07

Omkar Jadhav · Accepted Answer · 2018-03-09 10:00:54Z

4

Materialize.css overrides browser defaults to enable select tag. To avoid this, you can use "browser-default" class in select tag.

<select class="browser-default">
      <option value="" disabled selected>Choose your option</option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
 </select>

answered Mar 9, 2018 at 10:00

Omkar Jadhav

865 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Schulace · Accepted Answer · 2018-11-06 20:41:16Z

1

You can also use the "react-materialize" package to get materialize into your react app. Once you've set it up, it lets you do select without any wonky hacks like changing your componentDidMount() or removing styling like so:

<Row>
  <Input type="select" value={}>
    <option value={} key={}> your option here</option>
  </Input>
<Row>

see https://react-materialize.github.io/#/forms for more

answered Nov 6, 2018 at 20:41

Schulace

134 bronze badges

Comments

Taylor Austin · Accepted Answer · 2017-09-21 15:13:57Z

This seems a bit much to have to do for a select input, but after some research I found out how to solve this.

First you need to go into the component in which you have the select input.

In that component in the componentDidMount() you will add the following:

 componentDidMount() {
    const element = ReactDOM.findDOMNode(this.refs.dropdown);

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

Make sure you import ReactDOM at the top from react-dom

After this you will need to make a ref value in your select like so:

        <select
          ref="dropdown"
          id="category"
          defaultValue="1"
          onChange={this.updateTask.bind(this)}
        >

Note that the ref matches from the this.refs.dropdown. Now since we are using jQuery we need to make sure it will function and in order to do so you will need to go to your webpack.config.js file and add the following plugin.

plugins: [
  new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery",
      "Hammer": "hammerjs/hammer",
      createDayLabel: "jquery",
      createWeekdayLabel: "jquery",
      activateOption: "jquery",
      leftPosition: "jquery"
  })
]

Now you are all set and should be ready to go.

Collectives™ on Stack Overflow

Materialize css --select-- not working in react

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related