chore(Combobox): use uncontrollableInput

package.json

@@ -130,7 +130,7 @@
     "styled-components": "^1.4.4",
     "superagent": "^3.5.0",
     "tar-stream": "^1.5.2",
-    "uncontrollable-input": "^0.0.0",
+    "uncontrollable-input": "^0.0.1",
     "vinyl": "^2.0.0",
     "watchify": "^3.7.0",
     "xml2js": "^0.4.17",

src/common/combobox.js

@@ -0,0 +1,64 @@
+import React from 'react'
+import uncontrollableInput from 'uncontrollable-input'
+import { isEmpty, map } from 'lodash'
+import {
+  DropdownButton,
+  MenuItem
+} from 'react-bootstrap-4/lib'
+
+import Component from './base-component'
+import propTypes from './prop-types'
+
+@uncontrollableInput({
+  defaultValue: ''
+})
+@propTypes({
+  disabled: propTypes.bool,
+  options: propTypes.oneOfType([
+    propTypes.arrayOf(propTypes.string),
+    propTypes.objectOf(propTypes.string)
+  ]),
+  onChange: propTypes.func.isRequired,
+  value: propTypes.string.isRequired
+})
+export default class Combobox extends Component {
+  _handleChange = event => {
+    this.props.onChange(event.target.value)
+  }
+
+  _setText (value) {
+    this.props.onChange(value)
+  }
+
+  render () {
+    const { options, ...props } = this.props
+
+    props.className = 'form-control'
+    props.onChange = this._handleChange
+    const Input = <input {...props} />
+
+    if (isEmpty(options)) {
+      return Input
+    }
+
+    return (
+      <div className='input-group'>
+        <div className='input-group-btn'>
+          <DropdownButton
+            bsStyle='secondary'
+            disabled={props.disabled}
+            id='selectInput'
+            title=''
+          >
+            {map(options, option =>
+              <MenuItem key={option} onClick={() => this._setText(option)}>
+                {option}
+              </MenuItem>
+            )}
+          </DropdownButton>
+        </div>
+        {Input}
+      </div>
+    )
+  }
+}

src/common/combobox/index.css

@@ -1,3 +0,0 @@
-.button {
-    border-radius: 0px;
-};

src/common/combobox/index.js

@@ -1,105 +0,0 @@
-import map from 'lodash/map'
-import React from 'react'
-import size from 'lodash/size'
-
-import Component from '../base-component'
-import propTypes from '../prop-types'
-import { ensureArray } from '../utils'
-import {
-  DropdownButton,
-  MenuItem
-} from 'react-bootstrap-4/lib'
-
-import styles from './index.css'
-
-@propTypes({
-  defaultValue: propTypes.any,
-  disabled: propTypes.bool,
-  max: propTypes.number,
-  min: propTypes.number,
-  options: propTypes.oneOfType([
-    propTypes.arrayOf(propTypes.string),
-    propTypes.number,
-    propTypes.objectOf(propTypes.string),
-    propTypes.string
-  ]),
-  onChange: propTypes.func,
-  placeholder: propTypes.string,
-  required: propTypes.bool,
-  step: propTypes.any,
-  type: propTypes.string,
-  value: propTypes.any
-})
-export default class Combobox extends Component {
-  static defaultProps = {
-    type: 'text'
-  }
-
-  get value () {
-    return this.refs.input.value
-  }
-
-  set value (value) {
-    this.refs.input.value = value
-  }
-
-  _handleChange = event => {
-    const { onChange } = this.props
-
-    if (onChange) {
-      onChange(event.target.value)
-    }
-  }
-
-  _setText (value) {
-    this.refs.input.value = value
-  }
-
-  render () {
-    const { props } = this
-    const options = ensureArray(props.options)
-
-    const Input = (
-      <input
-        className='form-control'
-        defaultValue={props.defaultValue}
-        disabled={props.disabled}
-        max={props.max}
-        min={props.min}
-        options={options}
-        onChange={this._handleChange}
-        placeholder={props.placeholder}
-        ref='input'
-        required={props.required}
-        step={props.step}
-        type={props.type}
-        value={props.value}
-      />
-    )
-
-    if (!size(options)) {
-      return Input
-    }
-
-    return (
-      <div className='input-group'>
-        <div className='input-group-btn'>
-          <DropdownButton
-            bsStyle='secondary'
-            className={styles.button}
-            disabled={props.disabled}
-            id='selectInput'
-            title=''
-          >
-            {map(options, option => (
-              <MenuItem key={option} onClick={() => this._setText(option)}>
-                {option}
-              </MenuItem>
-            ))}
-          </DropdownButton>
-        </div>
-        {Input}
-      </div>
-    )
-  }
-}

yarn.lock

@@ -7205,9 +7205,9 @@ unc-path-regex@^0.1.0:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/unc-path-regex/-/unc-path-regex-0.1.2.tgz#e73dd3d7b0d7c5ed86fbac6b0ae7d8c6a69d50fa"
 
-uncontrollable-input@^0.0.0:
+uncontrollable-input@^0.0.1:
-  version "0.0.0"
+  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/uncontrollable-input/-/uncontrollable-input-0.0.0.tgz#d2c758615599c2127dec1be7d0a36ef318709ba1"
+  resolved "https://registry.yarnpkg.com/uncontrollable-input/-/uncontrollable-input-0.0.1.tgz#ff3f4730fa2ae81797889bafd1bc426aeb4936b9"
 
 uncontrollable@^3.1.3:
   version "3.3.1"