use composition input

browser/main/TopBar/index.js

@@ -7,6 +7,7 @@ import ee from 'browser/main/lib/eventEmitter'
 import NewNoteButton from 'browser/main/NewNoteButton'
 import i18n from 'browser/lib/i18n'
 import debounce from 'lodash/debounce'
+import CInput from 'react-composition-input'
 
 class TopBar extends React.Component {
   constructor (props) {
@@ -15,10 +16,7 @@ class TopBar extends React.Component {
     this.state = {
       search: '',
       searchOptions: [],
-      isSearching: false,
-      isAlphabet: false,
-      isIME: false,
-      isConfirmTranslation: false
+      isSearching: false
     }
 
     this.focusSearchHandler = () => {
@@ -30,6 +28,7 @@ class TopBar extends React.Component {
     this.handleSearchFocus = this.handleSearchFocus.bind(this)
     this.handleSearchBlur = this.handleSearchBlur.bind(this)
     this.handleSearchChange = this.handleSearchChange.bind(this)
+    this.handleSearchClearButton = this.handleSearchClearButton.bind(this)
 
     this.debouncedUpdateKeyword = debounce((keyword) => {
       this.context.router.push(`/searched/${encodeURIComponent(keyword)}`)
@@ -91,7 +90,7 @@ class TopBar extends React.Component {
   }
 
   handleSearchChange (e) {
-    const keyword = this.refs.searchInput.value
+    const keyword = e.target.value
     this.debouncedUpdateKeyword(keyword)
   }
 
@@ -130,7 +129,7 @@ class TopBar extends React.Component {
   }
 
   handleCodeInit () {
-    ee.emit('top:search', this.refs.searchInput.value)
+    ee.emit('top:search', this.refs.searchInput.value || '')
   }
 
   render () {
@@ -148,10 +147,10 @@ class TopBar extends React.Component {
               tabIndex='-1'
               ref='search'
             >
-              <input
+              <CInput
                 ref='searchInput'
                 value={this.state.search}
-                onChange={(e) => this.debouncedUpdateKeyword(this.refs.searchInput.value)}
+                onInputChange={this.handleSearchChange}
                 onKeyDown={this.handleKeyDown}
                 placeholder={i18n.__('Search')}
                 type='text'
@@ -159,7 +158,7 @@ class TopBar extends React.Component {
               />
               {this.state.search !== '' &&
                 <button styleName='control-search-input-clear'
-                  onClick={this.handleSearchChange}
+                  onClick={this.handleSearchClearButton}
                 >
                   <i className='fa fa-fw fa-times' />
                   <span styleName='control-search-input-clear-tooltip'>{i18n.__('Clear Search')}</span>

package.json

@@ -101,6 +101,7 @@
     "react-autosuggest": "^9.4.0",
     "react-codemirror": "^0.3.0",
     "react-color": "^2.2.2",
+    "react-composition-input": "^1.1.1",
     "react-debounce-render": "^4.0.1",
     "react-dom": "^15.0.2",
     "react-image-carousel": "^2.0.18",

yarn.lock

@@ -7524,6 +7524,13 @@ react-color@^2.2.2:
     reactcss "^1.2.0"
     tinycolor2 "^1.4.1"
 
+react-composition-input@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/react-composition-input/-/react-composition-input-1.1.1.tgz#51fc711f8b1c7d11e39210639175f0b48de44aff"
+  integrity sha512-xzRAUvsrEdSjI1tQXu3ouPHkHVZnunx6OoAFsv4YxVV6fIBHc9XZuxkmJwoxSatPxJ6WN94k91PBWQTsL6h/ZA==
+  dependencies:
+    prop-types "^15.6.2"
+
 react-css-modules@^3.7.6:
   version "3.7.10"
   resolved "https://registry.yarnpkg.com/react-css-modules/-/react-css-modules-3.7.10.tgz#300da561e550eeec5ebc0bc8c7d51d77d88ae2d7"