fix handling composition mode in query inputs

czcorpus · Oct 31, 2022 · 0f7a449 · 0f7a449
1 parent 28f27bb
commit 0f7a449
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 15 deletions.
diff --git a/public/files/js/views/cqlEditor.tsx b/public/files/js/views/cqlEditor.tsx
@@ -65,6 +65,7 @@ interface CQLEditorCoreState {
     queries:{[sourceId:string]:AdvancedQuery|SimpleQuery}|unknown; // pquery block -> query
     downArrowTriggersHistory:{[sourceId:string]:boolean};
     cqlEditorMessages:{[sourceId:string]:Array<string>};
+    compositionModeOn:boolean;
 }
 
 
@@ -151,10 +152,12 @@ export function init(dispatcher:IActionDispatcher, he:Kontext.ComponentHelpers,
             this.inputKeyDownHandler = this.inputKeyDownHandler.bind(this);
             this.ffKeyDownHandler = this.ffKeyDownHandler.bind(this);
             this.handleSelect = this.handleSelect.bind(this);
+            this.handleCompositionStart = this.handleCompositionStart.bind(this);
+            this.handleCompositionEnd = this.handleCompositionEnd.bind(this);
             this.contentEditable = new ContentEditable<HTMLPreElement>(this.props.inputRef);
         }
 
-        private handleInputChange() {
+        private newInputDispatch() {
             const [rawAnchorIdx, rawFocusIdx] = this.contentEditable.getRawSelection();
             const query = this.contentEditable.extractText();
 
@@ -171,6 +174,35 @@ export function init(dispatcher:IActionDispatcher, he:Kontext.ComponentHelpers,
             });
         }
 
+        private handleInputChange() {
+            if (!this.props.compositionModeOn) {
+                this.newInputDispatch();
+            }
+        }
+
+        private handleCompositionStart() {
+            dispatcher.dispatch<typeof Actions.SetCompositionMode>({
+                name: Actions.SetCompositionMode.name,
+                payload: {
+                    formType: this.props.formType,
+                    status: true
+                }
+            });
+        }
+
+        private handleCompositionEnd() {
+            dispatcher.dispatch<typeof Actions.SetCompositionMode>({
+                name: Actions.SetCompositionMode.name,
+                payload: {
+                    formType: this.props.formType,
+                    status: false
+                }
+            });
+            // Chrome performs onCompositionEnd action after inputChange
+            // we have to dispatch new state here
+            this.newInputDispatch();
+        }
+
         private findLinkParent(elm:HTMLElement):HTMLElement {
             let curr = elm;
             while (curr !== this.props.inputRef.current) {
@@ -361,6 +393,8 @@ export function init(dispatcher:IActionDispatcher, he:Kontext.ComponentHelpers,
                                 contentEditable={true}
                                 spellCheck={false}
                                 onInput={(evt) => this.handleInputChange()}
+                                onCompositionStart={this.handleCompositionStart}
+                                onCompositionEnd={this.handleCompositionEnd}
                                 onClick={this.handleEditorClick}
                                 className="cql-input"
                                 ref={this.props.inputRef}

diff --git a/public/files/js/views/query/richInput.tsx b/public/files/js/views/query/richInput.tsx
@@ -81,22 +81,26 @@ export function init(
             this.handleCompositionEnd = this.handleCompositionEnd.bind(this);
         }
 
+        private newInputDispatch(evt:React.ChangeEvent<HTMLInputElement>|React.CompositionEvent<HTMLInputElement>) {
+            const [rawAnchorIdx, rawFocusIdx] = this.contentEditable.getRawSelection();
+            const query = this.contentEditable.extractText();
+            dispatcher.dispatch<typeof Actions.QueryInputSetQuery>({
+                name: Actions.QueryInputSetQuery.name,
+                payload: {
+                    formType: this.props.formType,
+                    sourceId: this.props.sourceId,
+                    query,
+                    rawAnchorIdx,
+                    rawFocusIdx,
+                    insertRange: null
+                }
+            });
+        }
+
 
         private handleInputChange(evt:React.ChangeEvent<HTMLInputElement>) {
             if (!this.props.compositionModeOn) {
-                const [rawAnchorIdx, rawFocusIdx] = this.contentEditable.getRawSelection();
-                const query = this.contentEditable.extractText();
-                dispatcher.dispatch<typeof Actions.QueryInputSetQuery>({
-                    name: Actions.QueryInputSetQuery.name,
-                    payload: {
-                        formType: this.props.formType,
-                        sourceId: this.props.sourceId,
-                        query,
-                        rawAnchorIdx,
-                        rawFocusIdx,
-                        insertRange: null
-                    }
-                });
+                this.newInputDispatch(evt);
             }
         }
 
@@ -238,14 +242,17 @@ export function init(
             });
         }
 
-        private handleCompositionEnd() {
+        private handleCompositionEnd(evt:React.CompositionEvent<HTMLInputElement>) {
             dispatcher.dispatch<typeof Actions.SetCompositionMode>({
                 name: Actions.SetCompositionMode.name,
                 payload: {
                     formType: this.props.formType,
                     status: false
                 }
             });
+            // Chrome performs onCompositionEnd action after inputChange
+            // we have to dispatch new state here
+            this.newInputDispatch(evt);
         }
 
         componentDidUpdate(prevProps:RichInputProps & QueryFormModelState, _:unknown) {