get-focus · TomGallon · Feb 6, 2017 · Feb 6, 2017 · Feb 6, 2017 · Feb 6, 2017
diff --git a/src/select-mdl/__tests__/index.js b/src/select-mdl/__tests__/index.js
@@ -121,8 +121,8 @@ describe('<SelectMdl />', () => {
         const wrapper = mount(<Select name='component' onChange={sinon.spy()} values={VALUES} error={message} valid={false} />)
         const selectComponent = wrapper.find('[data-focus="select-mdl"]');
         it('it should be displayed', () => {
-            expect(selectComponent.find('div.label-error')).to.exist;
-            expect(selectComponent.find('div.label-error').text()).to.equal(message);
+            expect(selectComponent.find('span.mdl-textfield__error')).to.exist;
+            expect(selectComponent.find('span.mdl-textfield__error').text()).to.equal(message);
         });
     })
 });
diff --git a/src/select-mdl/index.js b/src/select-mdl/index.js
@@ -15,11 +15,12 @@ const UNSELECTED_KEY = 'UNSELECTED_KEY';
 * @return {strint | number}  - The parsed value.
 */
 function _valueParser(propsValue, rawValue) {
-  if(UNSELECTED_KEY === rawValue) {
-    return undefined;
-  }
-  const {type} = this.props;
-  return type === 'number' ? +rawValue : rawValue;
+    const returnValue = rawValue ? rawValue : propsValue
+    if(UNSELECTED_KEY === rawValue) {
+        return null;
+    }
+    const {type} = this.props;
+    return type === 'number' ? +returnValue : returnValue;
 }
 
 
@@ -28,112 +29,112 @@ function _valueParser(propsValue, rawValue) {
 * https://github.com/CreativeIT/getmdl-select/
 */
 class Select extends PureComponent {
+    componentDidMount() {
+        const selectMenu = ReactDOM.findDOMNode(this.refs["selectMenu"]);
+        componentHandler.upgradeElement(selectMenu);
 
+    }
 
-  componentDidMount() {
-    const selectMenu = ReactDOM.findDOMNode(this.refs["selectMenu"]);
-    componentHandler.upgradeElement(selectMenu);
-  }
+    /**
+    * Get the dom value of the component.
+    * @return {object} - The unformated dom value.
+    */
+    getValue = () => {
+        const {type, rawInputValue} = this.props;
+        if (isNull(rawInputValue) || isUndefined(rawInputValue) || UNSELECTED_KEY === rawInputValue) return null;
+        return type === 'number' ? +rawInputValue : rawInputValue;
+    };
 
-  /**
-  * Get the dom value of the component.
-  * @return {object} - The unformated dom value.
-  */
-  getValue = () => {
-    const {type, rawInputValue} = this.props;
-    if (isNull(rawInputValue) || isUndefined(rawInputValue) || UNSELECTED_KEY === rawInputValue) return null;
-    return type === 'number' ? +rawInputValue : rawInputValue;
-  };
+    /**
+    * Handle the change on the select, it only propagates the value.
+    * @param  {object} evt - The react DOM event.
+    * @return {object} - The function onChange from the props, called.
+    */
+    _handleSelectChange = (val, value) => {
+        const {onChange, valueParser, rawInputValue} = this.props;
+        ReactDOM.findDOMNode(this.refs["selectMenu"]).parentNode.classList.remove('is-visible');
+        return onChange(valueParser.call(this, rawInputValue, value));
+    };
 
-  /**
-  * Handle the change on the select, it only propagates the value.
-  * @param  {object} evt - The react DOM event.
-  * @return {object} - The function onChange from the props, called.
-  */
-  _handleSelectChange = (val, value) => {
-    const {onChange, valueParser, rawInputValue} = this.props;
-    ReactDOM.findDOMNode(this.refs["selectMenu"]).parentNode.classList.remove('is-visible');
-    return onChange(valueParser.call(this, rawInputValue, value));
-  };
+    /** inheritdoc */
+    _renderOptions({defaultValue, labelKey, hasUndefined, currentValue, isRequired, rawInputValue, values = [], valueKey, isActiveProperty, unSelectedLabel}) {
+        values = hasUndefined  ? union([{[labelKey]: i18next.t(unSelectedLabel), [valueKey]: UNSELECTED_KEY}], this.props.values) : values;
+        return values.filter(v => isUndefined(v[isActiveProperty]) || v[isActiveProperty] === true) // Filter on the active value only
+        .map((val, idx) => {
+            const optVal = `${val[valueKey]}`;
+            const elementValue = val[labelKey];
+            const isSelected = optVal === rawInputValue;
+            const optLabel = isUndefined(elementValue) || isNull(elementValue) ? i18next.t(unSelectedLabel) : i18next.t(elementValue);
+            return (
+                <li key={idx} className='mdl-menu__item' data-selected={isSelected} data-val={optVal} onClick={() => this._handleSelectChange(val, optVal)}>{optLabel}</li>
+            );
+        });
+    }
 
-  /** inheritdoc */
-  _renderOptions({defaultValue, labelKey, hasUndefined, currentValue, isRequired, rawInputValue, values = [], valueKey, isActiveProperty, unSelectedLabel}) {
-    values = (!defaultValue && hasUndefined) ? union([{[labelKey]: i18next.t(unSelectedLabel), [valueKey]: UNSELECTED_KEY}], this.props.values) : values;
-    return values.filter(v => isUndefined(v[isActiveProperty]) || v[isActiveProperty] === true) // Filter on the active value only
-    .map((val, idx) => {
-      const optVal = `${val[valueKey]}`;
-      const elementValue = val[labelKey];
-      const isSelected = optVal === rawInputValue;
-      const optLabel = isUndefined(elementValue) || isNull(elementValue) ? i18next.t(unSelectedLabel) : i18next.t(elementValue);
-      return (
-        <li key={idx} className='mdl-menu__item' data-selected={isSelected} data-val={optVal} onClick={() => this._handleSelectChange(val, optVal)}>{optLabel}</li>
-      );
-    });
-  }
-
-  /**
-  * @inheritdoc
-  * @override
-  */
-  render() {
-    const { autoFocus, error, labelKey, name, placeholder, hasUndefined, style, rawInputValue, valueKey, disabled, onChange, size, valid, unSelectedLabel, defaultValue } = this.props;
-    const selectProps = { autoFocus, disabled, size };
-    const currentValue = find(this.props.values, (o) => o[valueKey] === rawInputValue);
-    const currentLabel = (defaultValue && hasUndefined) ? i18next.t(defaultValue[labelKey]) : (currentValue ? i18next.t(currentValue[labelKey]) : i18next.t(unSelectedLabel))
-    const currentDataVal = (defaultValue && hasUndefined) ? i18next.t(defaultValue[labelKey]) : (currentValue ? i18next.t(currentValue[labelKey]) :  i18next.t(unSelectedLabel))
-
-    return (
-      <div data-focus='select-mdl' ref='select' className='mdl-textfield mdl-js-textfield getmdl-select' data-valid={!error} style={style}>
-        <input placeholder={placeholder} className='mdl-textfield__input' value={currentLabel} type='text' id={name} name={name} readOnly tabIndex='-1' data-val={currentDataVal} ref='htmlSelect' {...selectProps} />
-        {!disabled &&
-          <label htmlFor={name}>
-            <i className='mdl-icon-toggle__label material-icons'>keyboard_arrow_down</i>
-          </label>
-        }
-        {!disabled &&
-          <ul className='mdl-menu mdl-js-menu' htmlFor={name} ref='selectMenu'>
-            {this._renderOptions({...this.props, currentValue})}
-          </ul>
-        }
-        {!valid && <div className='label-error' ref='error'>{error}</div>}
-      </div>
-    );
-  }
+    /**
+    * @inheritdoc
+    * @override
+    */
+    render() {
+        const { autoFocus, error, labelKey, name, placeholder, hasUndefined, style, rawInputValue, valueKey, disabled, onChange, size, valid, unSelectedLabel,  defaultValue } = this.props;
+        const selectProps = { autoFocus, disabled, size };
+        const currentValue = find(this.props.values, (o) => o[valueKey] === rawInputValue) || {};
+        const currentLabel = rawInputValue ? i18next.t(currentValue[labelKey]) : i18next.t(unSelectedLabel)
+        const currentDataVal = rawInputValue ? i18next.t(currentValue[labelKey]) : i18next.t(unSelectedLabel)
+        const cssClass = `mdl-textfield mdl-js-textfield${!valid ? ' is-invalid' : ''}`;
+        return (
+            <div data-focus='select-mdl' ref='select' className={`${cssClass} getmdl-select`} data-valid={!error} style={style}>
+                <input placeholder={placeholder} className='mdl-textfield__input' value={currentLabel} type='text' id={name} name={name} readOnly tabIndex='-1' data-val={currentDataVal} ref='htmlSelect' {...selectProps} />
+                {!disabled &&
+                    <label htmlFor={name}>
+                        <i className='mdl-icon-toggle__label material-icons'>keyboard_arrow_down</i>
+                    </label>
+                }
+                {!disabled &&
+                    <ul className='mdl-menu mdl-js-menu' htmlFor={name} ref='selectMenu'>
+                        {this._renderOptions({...this.props, currentValue})}
+                    </ul>
+                }
+                {!valid && <span className='mdl-textfield__error' ref='error'>{i18next.t(error)}</span>}
+            </div>
+        );
+    }
 }
 
 Select.displayName = 'Select';
 Select.defaultProps = {
-  disabled: false,
-  error: 'input.select-mdl.error.default',
-  hasUndefined: true,
-  isActiveProperty: 'isActive',
-  isRequired: false,
-  labelKey: 'label',
-  multiple: false,
-  unSelectedLabel: 'select.unSelected',
-  valid: true,
-  values: [],
-  valueKey: 'code',
-  valueParser: _valueParser
+    disabled: false,
+    error: 'input.select-mdl.error.default',
+    hasUndefined: true,
+    isActiveProperty: 'isActive',
+    isRequired: false,
+    labelKey: 'label',
+    multiple: false,
+    unSelectedLabel: 'select.unSelected',
+    valid: true,
+    values: [],
+    valueKey: 'code',
+    valueParser: _valueParser
 };
 Select.propTypes = {
-  defaultValue: PropTypes.object,
-  disabled: PropTypes.bool,
-  error: PropTypes.string,
-  hasUndefined: PropTypes.bool,
-  isActiveProperty: PropTypes.string,
-  isRequired: PropTypes.bool,
-  labelKey: PropTypes.string,
-  name: PropTypes.string.isRequired,
-  onChange: PropTypes.func.isRequired,
-  placeholder: PropTypes.string,
-  unSelectedLabel: PropTypes.string,
-  rawInputValue: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.number
-  ]),
-  valid: PropTypes.bool,
-  valueKey: PropTypes.string,
-  values: PropTypes.array.isRequired
+    defaultValue: PropTypes.object,
+    disabled: PropTypes.bool,
+    error: PropTypes.string,
+    hasUndefined: PropTypes.bool,
+    isActiveProperty: PropTypes.string,
+    isRequired: PropTypes.bool,
+    labelKey: PropTypes.string,
+    name: PropTypes.string.isRequired,
+    onChange: PropTypes.func.isRequired,
+    placeholder: PropTypes.string,
+    unSelectedLabel: PropTypes.string,
+    rawInputValue: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.number
+    ]),
+    valid: PropTypes.bool,
+    valueKey: PropTypes.string,
+    values: PropTypes.array.isRequired
 };
+
 export default Select;
diff --git a/src/select-mdl/index.scss b/src/select-mdl/index.scss
@@ -1,6 +1,7 @@
 
 //https://github.com/CreativeIT/getmdl-select/
 [data-focus="select-mdl"] {
+
     &.mdl-textfield {
         width: auto;
     }
@@ -16,6 +17,9 @@
             color: #000;
         }
     }
+    [data-selected="true"]{
+        background-color: #CFD8DC;
+    }
     .mdl-menu__container {
         width: 100% !important;
         top: 0px !important;
@@ -26,9 +30,7 @@
             width: 100% !important;
             .mdl-menu__item {
               z-index: 999;
-              [data-selected="true"]{
-                  background-color: #CFD8DC;
-              }
+
             }
         }
     }