Merge pull request #26 from ship-components/bugfix/select-errors

Fixed invalid options in select tag and improved option rendering logic

README.md

@@ -117,6 +117,7 @@ Below are is a sample of how to setup the loaders:
 
 ## History
 
+* 1.1.7 - Fixed invalid options in select tag and improved option rendering logic
 * 1.1.6 - Fixed a bug with dispatching events in IE11, deprecated Node 6
 * 1.1.5 - Fixed a calc bug from the lastest postcss
 * 1.1.4 - Updated dependencies (for security)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ship-components-select",
-  "version": "1.1.6",
+  "version": "1.1.7",
   "description": "Material Design React Select Box",
   "main": "src/Select.js",
   "scripts": {

src/Select.js

@@ -306,26 +306,26 @@ export default class Select extends React.Component {
           {(this.state.active ? opts : []).map(option => (
             <SelectOption
               {...option}
-              tag='li'
+              key={option.key || option.value}
               ref={option.value === currentValue.value ? 'selected' : void 0}
               selected={option.value === currentValue.value}
               onClick={this.handleClickItem.bind(this, option.value)} //eslint-disable-line
-              key={option.key || option.value}
             />
           ))}
         </ul>
         <select
           ref='input'
           readOnly
-          value={this.props.value}
+          value={currentValue.value}
           style={{display : 'none'}}
         >
           {opts.map(option => (
-            <SelectOption
-              {...option}
-              selected={option.value === currentValue.value}
+            <option
               key={option.key || option.value}
-            />
+              value={option.value}
+            >
+              {option.label || option.value}
+            </option>
           ))}
         </select>
       </OutsideClick>

src/SelectOption.js

@@ -14,22 +14,17 @@ import classNames from 'classnames';
 import cssClassNames from './select.css';
 
 /**
- * If we have a render option use that if we're not an <option>. Options only
- * support strings and numbers
+ * Render option content
  * @return {React}
  */
 function getContents(props) {
-  if (props.tag !== 'option' && props.render) {
-    return props.render;
-  } else {
-    return props.label || props.value;
-  }
+  return props.render || props.label || props.value;
 }
 
 export default class SelectOption extends React.Component {
 
   shouldComponentUpdate(nextProps) {
-    if (nextProps.tag !== 'option' && nextProps.render) { // eslint-disable-line react/prop-types
+    if (nextProps.render) {
       // Rendering a another component so we just skip
       return true;
     }
@@ -45,30 +40,34 @@ export default class SelectOption extends React.Component {
       }
     );
     return (
-      <this.props.tag
+      <li
         className={classes}
         value={this.props.value}
         onClick={this.props.onClick}
       >
         {getContents(this.props)}
-      </this.props.tag>
+      </li>
     );
   }
 }
 
 SelectOption.defaultProps = {
   className: '',
   label: '',
-  tag: 'option',
+  render: void 0,
   selected: false,
   onClick: void 0
 };
 
 SelectOption.propTypes = {
   className: PropTypes.string,
   label: PropTypes.string,
+  render: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node,
+    PropTypes.string
+  ]),
   value: PropTypes.string.isRequired,
-  tag: PropTypes.string,
   onClick: PropTypes.func,
   selected: PropTypes.bool
 };