React MDL SelectField for Redux Form

SelectField.js

import React, { Component, PropTypes } from 'react'
import classnames from 'classnames'

import './SelectField.scss'

/**
 * Select field polyfill until mdl implements it
 * https://github.com/google/material-design-lite/issues/4475
 * https://github.com/google/material-design-lite/issues/854
 */
export default class SelectField extends Component {

  constructor(props) {
    super(props)
    this.state = { focused: false }
  }

  onFocus = (e) => {
    this.props.input.onFocus(e)
    this.focusTimeout = setTimeout(() => {
      this.focusTimeout = null
      this.setState({ focused: true })
    })
  }

  onBlur = (e) => {
    this.props.input.onBlur(e)
    this.blurTimeout = setTimeout(() => {
      this.blurTimeout = null
      this.setState({ focused: false })
    })
  }

  componentWillUnmount() {
    if (this.focusTimeout) clearTimeout(this.focusTimeout)
    if (this.blurTimeout) clearTimeout(this.blurTimeout)
  }

  render() {
    const { children, input, label, meta: { touched, error }, ...other } = this.props
    const className = classnames({
      'mdl-selectfield': true,
      'mdl-selectfield--floating-label': true,
      'is-dirty': input.value,
      'is-focused': this.state.focused,
      'is-invalid': touched && error,
    })
    const props = { onFocus: this.onFocus, onBlur: this.onBlur }
    return (
      <div className={className}>
        <select className={'mdl-selectfield__select'} {...input} {...other} {...props}>
          {children}
        </select>
        <label className={'mdl-selectfield__label'}>{label}</label>
        {touched && error && <span className="mdl-selectfield__error">{error}</span>}
      </div>
    )
  }

}

SelectField.scss

/**
 * Select field polyfill until mdl implements it
 * https://github.com/google/material-design-lite/issues/4475
 * https://github.com/google/material-design-lite/issues/854
 */

.mdl-selectfield {
  position: relative;
  display: inline-block;
  padding: 20px 0;
  width: 300px;

  .mdl-selectfield__select {
    position: relative;
    width: 100%;
    padding: 4px 0;
    border: none;
    font-size: 16px;
    border-radius: 0;
    font-family: "Helvetica", "Arial", sans-serif;
    font-weight: 400;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    background-color: #fff;
    color: rgba(0, 0, 0, 0.870588);
    background-image: linear-gradient(45deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.2) 50%), linear-gradient(135deg, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0) 50%);
    background-position: calc(100% - 10px) calc(1em - 5px), calc(100% - 5px) calc(1em - 5px), calc(100% - 2.5em) 0.5em;
    background-size: 5px 5px, 5px 5px, 1px 1.5em;
    background-repeat: no-repeat;
    -webkit-appearance: none;
    -moz-appearance: none;

    outline: none;
  }

  .mdl-selectfield__label {
    position: absolute;
    display: block;
    overflow: hidden;
    top: 24px;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    font-size: 16px;
    pointer-events: none;
    white-space: nowrap;
    text-align: left;
    color: rgba(0, 0, 0, 0.36);

    // The after label is the colored underline for the TextField.
    &:after {
      background-color: #3f51b5;
      bottom: 20px;
      content: '';
      height: 2px;
      left: 45%;
      position: absolute;
      transition-duration: 0.2s;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
      visibility: hidden;
      width: 10px;
    }
  }



  &.is-dirty {
    .mdl-selectfield__select {
      color: rgba(0, 0, 0, 0.870588);
    }
    .mdl-selectfield__label {
      visibility: hidden;
    }
  }

  &.is-focused {
    .mdl-selectfield__select {
      outline: none;
    }
    .mdl-selectfield__label {
      &:after {
        left: 0;
        visibility: visible;
        width: 100%;
      }
    }
  }

  .mdl-selectfield__error {
    color: #d50000;
    position: absolute;
    font-size: 12px;
    margin-top: 3px;
    visibility: hidden;
    display: block;
  }

  &.is-invalid {
    .mdl-selectfield__select {
      border-color: #d50000;
      box-shadow: none;
    }
    .mdl-selectfield__label {
      &:after {
        background-color: #d50000;
      }
    }
    .mdl-selectfield__error {
      visibility: visible;
      color: #d50000;
    }
  }

  &.mdl-selectfield--floating-label {
    .mdl-selectfield__label {
      transition-duration: 0.2s;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
    &.has-placeholder {
      .mdl-selectfield__label {
        transition: none;
      }
    }
    &.is-focused,
    &.is-dirty,
    &.has-placeholder {
      .mdl-selectfield__label {
        color: rgb(63,81,181);
        font-size: 12px;
        top: 4px;
        visibility: visible;
      }
    }
    &.is-invalid {
      .mdl-selectfield__label {
        color: rgb(213,0,0);
        font-size: 12px;
      }
    }
  }

}