diff --git a/frontend/src/components/search/search.js b/frontend/src/components/search/search.js index d836a00714..adb4e61ab5 100644 --- a/frontend/src/components/search/search.js +++ b/frontend/src/components/search/search.js @@ -56,10 +56,13 @@ class Search extends Component { this.searchResultListRef = React.createRef(); this.timer = null; this.indexStateTimer = null; + this.isChineseInput = false; } componentDidMount() { document.addEventListener('keydown', this.onDocumentKeydown); + document.addEventListener('compositionstart', this.onCompositionStart); + document.addEventListener('compositionend', this.onCompositionEnd); if (enableSeafileAI && this.props.isLibView) { this.queryLibraryIndexState(); } @@ -80,10 +83,27 @@ class Search extends Component { componentWillUnmount() { document.removeEventListener('keydown', this.onDocumentKeydown); + document.removeEventListener('compositionstart', this.onCompositionStart); + document.removeEventListener('compositionend', this.onCompositionEnd); this.indexStateTimer && clearInterval(this.indexStateTimer); this.timer && clearTimeout(this.timer); + this.isChineseInput = false; } + onCompositionStart = () => { + this.isChineseInput = true; + }; + + onCompositionEnd = () => { + this.isChineseInput = false; + // chrome:compositionstart -> onChange -> compositionend + // not chrome:compositionstart -> compositionend -> onChange + // The onChange event will setState and change input value, then setTimeout to initiate the search + setTimeout(() => { + this.onSearch(this.state.searchMode === SEARCH_MODE.NORMAL); + }, 1); + }; + onDocumentKeydown = (e) => { if (isHotkey('mod+f')(e)) { e.preventDefault(); @@ -167,7 +187,9 @@ class Search extends Component { this.setState({ value: newValue }, () => { if (this.inputValue === newValue.trim()) return; this.inputValue = newValue.trim(); - this.onSearch(!this.props.isLibView || !enableSeafileAI); + if (!this.isChineseInput) { + this.onSearch(!this.props.isLibView || !enableSeafileAI); + } }); };