Materialize: Set default value for select during Initialization in React

Created on 6 Feb 2018  路  4Comments  路  Source: Dogfalo/materialize

This documentation described how to initialize select: http://next.materializecss.com/select.html,

var instance = M.Select.init(elem, options);

How can I pass the default value to the options? React does not allow selected in

picture weasteam

Most helpful comment

@Dogfalo no, it is not resolved.

It looks like the M.Select.init() will pick up the option with selected option. However, the <select default='xxx'> would not add selected to any options and therefore, M.Select.init() could not find the default value.

Here is the workflow:

  1. <select defaultValue='xxx'>...</select>
  2. the React default render knows which one is the default option and display it correctly. but it won't add selected attribute to <options>
  3. after all component rendered, I call M.Select.init() to init the materialize select.
  4. it looks like M.Select.init() is trying to set the <option selected> as default. Since this attribution is not here, as point 2 mentioned. It could not set the default value.

I would propose a solution like M.Select.init(elem, {default: "option 1"})

picture weasteam on 12 Feb 2018
👍5

All 4 comments

If using React, let's say you had 3 options:

\
\

Then your \