Use match instead of new state flags.

src/query.ts

@@ -1,3 +1,5 @@
+import {Match} from './text-expander-element'
+
 type Query = {
   text: string
   position: number
@@ -6,8 +8,7 @@ type Query = {
 type QueryOptions = {
   lookBackIndex: number
   multiWord: boolean
-  matchInProgress: boolean
-  currentMatchIndex: number
+  match: Match | null
 }
 
 const boundary = /\s|\(|\[/
@@ -17,11 +18,10 @@ export default function query(
   text: string,
   key: string,
   cursor: number,
-  {multiWord, lookBackIndex, matchInProgress, currentMatchIndex}: QueryOptions = {
+  {multiWord, lookBackIndex, match}: QueryOptions = {
     multiWord: false,
     lookBackIndex: 0,
-    matchInProgress: false,
-    currentMatchIndex: 0
+    match: null
   }
 ): Query | void {
   // Activation key not found in front of the cursor.
@@ -29,8 +29,8 @@ export default function query(
   if (keyIndex === -1) return
 
   if (multiWord) {
-    if (matchInProgress) {
-      keyIndex = currentMatchIndex - 1
+    if (match) {
+      keyIndex = match.position - 1
     }
 
     // Stop matching at the lookBackIndex

src/text-expander-element.ts

@@ -2,7 +2,7 @@ import Combobox from '@github/combobox-nav'
 import query from './query'
 import textFieldSelectionPosition from './text-field-selection-position'
 
-type Match = {
+export type Match = {
   text: string
   key: string
   position: number
@@ -32,8 +32,6 @@ class TextExpander {
   onmousedown: (event: Event) => void
   combobox: Combobox | null
   match: Match | null
-  matchInProgress: boolean
-  currentMatchIndex: number
   justPasted: boolean
   lookBackIndex: number
   interactingWithList: boolean
@@ -44,8 +42,6 @@ class TextExpander {
     this.combobox = null
     this.menu = null
     this.match = null
-    this.matchInProgress = false
-    this.currentMatchIndex = 0
     this.justPasted = false
     this.lookBackIndex = 0
     this.oninput = this.onInput.bind(this)
@@ -72,8 +68,6 @@ class TextExpander {
     if (this.input !== document.activeElement) return
 
     this.deactivate()
-    this.matchInProgress = true
-    this.currentMatchIndex = match.position
     this.menu = menu
 
     if (!menu.id) menu.id = `text-expander-${Math.floor(Math.random() * 100000).toString()}`
@@ -102,8 +96,6 @@ class TextExpander {
     this.combobox.destroy()
     this.combobox = null
     menu.remove()
-    this.matchInProgress = false
-    this.currentMatchIndex = 0
   }
 
   onCommit({target}: Event) {
@@ -184,8 +176,7 @@ class TextExpander {
       const found = query(text, key, cursor, {
         multiWord,
         lookBackIndex: this.lookBackIndex,
-        matchInProgress: this.matchInProgress,
-        currentMatchIndex: this.currentMatchIndex
+        match: this.match
       })
       if (found) {
         return {text: found.text, key, position: found.position}
@@ -213,6 +204,7 @@ class TextExpander {
   onKeydown(event: KeyboardEvent) {
     if (event.key === 'Escape' && (this.menu || this.combobox)) {
       this.deactivate()
+      this.match = null
       event.stopImmediatePropagation()
       event.preventDefault()
     }