Split ApplySelection into CompleteOrPrevSelection and CompleteOrNextSelection

When moving through the autocomplete selection list distinguish between
the following cases:
1) When there is no autocomplete window open, only open one and select
the first item when the CompleteOrPrevSelection /
CompleteOrNextSelection actions are emitted (e.g. by pressing SHIFT +
TAB, TAB)
2) Otherwise navigate through the selection list (e.g. SHIFT + TAB, TAB,
UP, DOWN)

- Remove references to raw keyboard events in autocomplete.ts
- Clarify the purpose of startSelection (previously onTab)

Signed-off-by: Clemens Zeidler <[email protected]>

Author: czeidler

src/KeyBindingsDefaults.ts

@@ -161,27 +161,27 @@ const messageComposerBindings = (): KeyBinding<MessageComposerAction>[] => {
 const autocompleteBindings = (): KeyBinding<AutocompleteAction>[] => {
     return [
         {
-            action: AutocompleteAction.ApplySelection,
+            action: AutocompleteAction.CompleteOrNextSelection,
             keyCombo: {
                 key: Key.TAB,
             },
         },
         {
-            action: AutocompleteAction.ApplySelection,
+            action: AutocompleteAction.CompleteOrNextSelection,
             keyCombo: {
                 key: Key.TAB,
                 ctrlKey: true,
             },
         },
         {
-            action: AutocompleteAction.ApplySelection,
+            action: AutocompleteAction.CompleteOrPrevSelection,
             keyCombo: {
                 key: Key.TAB,
                 shiftKey: true,
             },
         },
         {
-            action: AutocompleteAction.ApplySelection,
+            action: AutocompleteAction.CompleteOrPrevSelection,
             keyCombo: {
                 key: Key.TAB,
                 ctrlKey: true,

src/KeyBindingsManager.ts

@@ -52,14 +52,19 @@ export enum MessageComposerAction {
 
 /** Actions for text editing autocompletion */
 export enum AutocompleteAction {
-    /** Apply the current autocomplete selection */
-    ApplySelection = 'ApplySelection',
-    /** Cancel autocompletion */
-    Cancel = 'Cancel',
+    /**
+     * Select previous selection or, if the autocompletion window is not shown, open the window and select the first
+     * selection.
+     */
+    CompleteOrPrevSelection = 'ApplySelection',
+    /** Select next selection or, if the autocompletion window is not shown, open it and select the first selection */
+    CompleteOrNextSelection = 'CompleteOrNextSelection',
     /** Move to the previous autocomplete selection */
     PrevSelection = 'PrevSelection',
     /** Move to the next autocomplete selection */
     NextSelection = 'NextSelection',
+    /** Close the autocompletion window */
+    Cancel = 'Cancel',
 }
 
 /** Actions for the room list sidebar */

src/components/views/rooms/BasicMessageComposer.tsx

@@ -485,16 +485,14 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
         if (model.autoComplete && model.autoComplete.hasCompletions()) {
             const autoComplete = model.autoComplete;
             switch (autocompleteAction) {
+                case AutocompleteAction.CompleteOrPrevSelection:
                 case AutocompleteAction.PrevSelection:
-                    autoComplete.onUpArrow(event);
+                    autoComplete.selectPreviousSelection();
                     handled = true;
                     break;
+                case AutocompleteAction.CompleteOrNextSelection:
                 case AutocompleteAction.NextSelection:
-                    autoComplete.onDownArrow(event);
-                    handled = true;
-                    break;
-                case AutocompleteAction.ApplySelection:
-                    autoComplete.onTab(event);
+                    autoComplete.selectNextSelection();
                     handled = true;
                     break;
                 case AutocompleteAction.Cancel:
@@ -504,8 +502,10 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
                 default:
                     return; // don't preventDefault on anything else
             }
-        } else if (autocompleteAction === AutocompleteAction.ApplySelection) {
-            this.tabCompleteName(event);
+        } else if (autocompleteAction === AutocompleteAction.CompleteOrPrevSelection
+            || autocompleteAction === AutocompleteAction.CompleteOrNextSelection) {
+            // there is no current autocomplete window, try to open it
+            this.tabCompleteName();
             handled = true;
         } else if (event.key === Key.BACKSPACE || event.key === Key.DELETE) {
             this.formatBarRef.current.hide();
@@ -517,7 +517,7 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
         }
     };
 
-    private async tabCompleteName(event: React.KeyboardEvent) {
+    private async tabCompleteName() {
         try {
             await new Promise<void>(resolve => this.setState({showVisualBell: false}, resolve));
             const {model} = this.props;
@@ -540,7 +540,7 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
 
             // Don't try to do things with the autocomplete if there is none shown
             if (model.autoComplete) {
-                await model.autoComplete.onTab(event);
+                await model.autoComplete.startSelection();
                 if (!model.autoComplete.hasSelection()) {
                     this.setState({showVisualBell: true});
                     model.autoComplete.close();

src/editor/autocomplete.ts

@@ -68,24 +68,24 @@ export default class AutocompleteWrapperModel {
         this.updateCallback({close: true});
     }
 
-    public async onTab(e: KeyboardEvent) {
+    /**
+     * If there is no current autocompletion, start one and move to the first selection.
+     */
+    public async startSelection() {
         const acComponent = this.getAutocompleterComponent();
-
         if (acComponent.countCompletions() === 0) {
             // Force completions to show for the text currently entered
             await acComponent.forceComplete();
             // Select the first item by moving "down"
             await acComponent.moveSelection(+1);
-        } else {
-            await acComponent.moveSelection(e.shiftKey ? -1 : +1);
         }
     }
 
-    public onUpArrow(e: KeyboardEvent) {
+    public selectPreviousSelection() {
         this.getAutocompleterComponent().moveSelection(-1);
     }
 
-    public onDownArrow(e: KeyboardEvent) {
+    public selectNextSelection() {
         this.getAutocompleterComponent().moveSelection(+1);
     }