Merge pull request #3037 from AWolf81/fix-search-issue-unicode

Simplified search input & fixed chinese character input

browser/main/Detail/MarkdownNoteDetail.js

@@ -67,9 +67,6 @@ class MarkdownNoteDetail extends React.Component {
     })
     ee.on('hotkey:deletenote', this.handleDeleteNote.bind(this))
     ee.on('code:generate-toc', this.generateToc)
-
-    // Focus content if using blur or double click
-    if (this.state.switchPreview === 'BLUR' || this.state.switchPreview === 'DBL_CLICK') this.focus()
   }
 
   componentWillReceiveProps (nextProps) {
@@ -84,6 +81,20 @@ class MarkdownNoteDetail extends React.Component {
         if (this.refs.tags) this.refs.tags.reset()
       })
     }
+
+    // Focus content if using blur or double click
+    // --> Moved here from componentDidMount so a re-render during search won't set focus to the editor
+    const {switchPreview} = nextProps.config.editor
+
+    if (this.state.switchPreview !== switchPreview) {
+      this.setState({
+        switchPreview
+      })
+      if (switchPreview === 'BLUR' || switchPreview === 'DBL_CLICK') {
+        console.log('setting focus', switchPreview)
+        this.focus()
+      }
+    }
   }
 
   componentWillUnmount () {

browser/main/TopBar/index.js

@@ -7,8 +7,8 @@ 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'
 import { push } from 'connected-react-router'
-import queryString from 'query-string'
 
 class TopBar extends React.Component {
   constructor (props) {
@@ -17,21 +17,29 @@ class TopBar extends React.Component {
     this.state = {
       search: '',
       searchOptions: [],
-      isSearching: false,
+      isSearching: false
-      isAlphabet: false,
-      isIME: false,
-      isConfirmTranslation: false
     }
 
+    const { dispatch } = this.props
+
     this.focusSearchHandler = () => {
       this.handleOnSearchFocus()
     }
 
     this.codeInitHandler = this.handleCodeInit.bind(this)
-    this.updateKeyword = this.updateKeyword.bind(this)
+    this.handleKeyDown = this.handleKeyDown.bind(this)
+    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.updateKeyword = debounce(this.updateKeyword, 1000 / 60, {
+    this.debouncedUpdateKeyword = debounce((keyword) => {
+      dispatch(push(`/searched/${encodeURIComponent(keyword)}`))
+      this.setState({
+        search: keyword
+      })
+      ee.emit('top:search', keyword)
+    }, 1000 / 60, {
       maxWait: 1000 / 8
     })
   }
@@ -66,11 +74,10 @@ class TopBar extends React.Component {
   }
 
   handleKeyDown (e) {
-    // reset states
+    // Re-apply search field on ENTER key
-    this.setState({
+    if (e.keyCode === 13) {
-      isAlphabet: false,
+      this.debouncedUpdateKeyword(e.target.value)
-      isIME: false
+    }
-    })
 
     // Clear search on ESC
     if (e.keyCode === 27) {
@@ -88,52 +95,11 @@ class TopBar extends React.Component {
       ee.emit('list:prior')
       e.preventDefault()
     }
-
-    // When the key is an alphabet, del, enter or ctr
-    if (e.keyCode <= 90 || e.keyCode >= 186 && e.keyCode <= 222) {
-      this.setState({
-        isAlphabet: true
-      })
-    // When the key is an IME input (Japanese, Chinese)
-    } else if (e.keyCode === 229) {
-      this.setState({
-        isIME: true
-      })
-    }
-  }
-
-  handleKeyUp (e) {
-    // reset states
-    this.setState({
-      isConfirmTranslation: false
-    })
-
-    // When the key is translation confirmation (Enter, Space)
-    if (this.state.isIME && (e.keyCode === 32 || e.keyCode === 13)) {
-      this.setState({
-        isConfirmTranslation: true
-      })
-      const keyword = this.refs.searchInput.value
-      this.updateKeyword(keyword)
-    }
   }
 
   handleSearchChange (e) {
-    if (this.state.isAlphabet || this.state.isConfirmTranslation) {
+    const keyword = e.target.value
-      const keyword = this.refs.searchInput.value
+    this.debouncedUpdateKeyword(keyword)
-      this.updateKeyword(keyword)
-    } else {
-      e.preventDefault()
-    }
-  }
-
-  updateKeyword (keyword) {
-    const { dispatch } = this.props
-    dispatch(push(`/searched/${encodeURIComponent(keyword)}`))
-    this.setState({
-      search: keyword
-    })
-    ee.emit('top:search', keyword)
   }
 
   handleSearchFocus (e) {
@@ -141,6 +107,7 @@ class TopBar extends React.Component {
       isSearching: true
     })
   }
+
   handleSearchBlur (e) {
     e.stopPropagation()
 
@@ -170,7 +137,7 @@ class TopBar extends React.Component {
   }
 
   handleCodeInit () {
-    ee.emit('top:search', this.refs.searchInput.value)
+    ee.emit('top:search', this.refs.searchInput.value || '')
   }
 
   render () {
@@ -183,24 +150,23 @@ class TopBar extends React.Component {
         <div styleName='control'>
           <div styleName='control-search'>
             <div styleName='control-search-input'
-              onFocus={(e) => this.handleSearchFocus(e)}
+              onFocus={this.handleSearchFocus}
-              onBlur={(e) => this.handleSearchBlur(e)}
+              onBlur={this.handleSearchBlur}
               tabIndex='-1'
               ref='search'
             >
-              <input
+              <CInput
                 ref='searchInput'
                 value={this.state.search}
-                onChange={(e) => this.handleSearchChange(e)}
+                onInputChange={this.handleSearchChange}
-                onKeyDown={(e) => this.handleKeyDown(e)}
+                onKeyDown={this.handleKeyDown}
-                onKeyUp={(e) => this.handleKeyUp(e)}
                 placeholder={i18n.__('Search')}
                 type='text'
                 className='searchInput'
               />
               {this.state.search !== '' &&
                 <button styleName='control-search-input-clear'
-                  onClick={(e) => this.handleSearchClearButton(e)}
+                  onClick={this.handleSearchClearButton}
                 >
                   <i className='fa fa-fw fa-times' />
                   <span styleName='control-search-input-clear-tooltip'>{i18n.__('Clear Search')}</span>

package.json

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

yarn.lock

@@ -7746,6 +7746,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@^4.7.9:
   version "4.7.9"
   resolved "https://registry.yarnpkg.com/react-css-modules/-/react-css-modules-4.7.9.tgz#459235e149a0df7a62b092ae079d53cb0b6154ee"