From 6eff10109e015a234a702280acc4e682955f7aec Mon Sep 17 00:00:00 2001
From: Boris Diakur <borisdiakur@gmail.com>
Date: Tue, 27 Jul 2021 21:20:06 +0200
Subject: [PATCH] fix(ld-select): typeahead with none-matching query

---
 src/liquid/components/ld-select/ld-select.tsx | 13 ++++++----
 .../ld-select/test/ld-select.spec.ts          | 26 +++++++++++++++++++
 2 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/src/liquid/components/ld-select/ld-select.tsx b/src/liquid/components/ld-select/ld-select.tsx
index e1e2ef24b2..3b69e1c57f 100644
--- a/src/liquid/components/ld-select/ld-select.tsx
+++ b/src/liquid/components/ld-select/ld-select.tsx
@@ -140,11 +140,14 @@ export class LdSelect {
       return
     }
 
-    index = [newQuery, ...values]
-      .sort()
-      .findIndex(
-        (value) => value.toLowerCase().indexOf(newQuery.toLowerCase()) === 0
-      )
+    index = 0
+    for (let i = 0; i < values.length; i++) {
+      if (newQuery.toLowerCase() < values[i].toLowerCase()) {
+        index = i + 1
+        break
+      }
+    }
+
     if (index > 0) {
       options[index - 1].focus()
     }
diff --git a/src/liquid/components/ld-select/test/ld-select.spec.ts b/src/liquid/components/ld-select/test/ld-select.spec.ts
index 9600cc6ed6..09163a2588 100644
--- a/src/liquid/components/ld-select/test/ld-select.spec.ts
+++ b/src/liquid/components/ld-select/test/ld-select.spec.ts
@@ -1308,6 +1308,32 @@ describe('ld-select', () => {
     expect(spyFocusPine).toHaveBeenCalledTimes(1)
     expect(spyFocusBana).toHaveBeenCalledTimes(0)
     expect(spyFocusPlum).toHaveBeenCalledTimes(1)
+
+    await new Promise((resolve) => setTimeout(resolve, 600))
+
+    doc.activeElement = btnTrigger
+    window.dispatchEvent(new KeyboardEvent('keydown', { key: 'i' }))
+    await page.waitForChanges()
+    await new Promise((resolve) => setTimeout(resolve))
+
+    expect(spyFocusAppl).toHaveBeenCalledTimes(0)
+    expect(spyFocusPear).toHaveBeenCalledTimes(3)
+    expect(spyFocusPine).toHaveBeenCalledTimes(1)
+    expect(spyFocusBana).toHaveBeenCalledTimes(0)
+    expect(spyFocusPlum).toHaveBeenCalledTimes(1)
+
+    await new Promise((resolve) => setTimeout(resolve, 600))
+
+    doc.activeElement = btnTrigger
+    window.dispatchEvent(new KeyboardEvent('keydown', { key: 'z' }))
+    await page.waitForChanges()
+    await new Promise((resolve) => setTimeout(resolve))
+
+    expect(spyFocusAppl).toHaveBeenCalledTimes(0)
+    expect(spyFocusPear).toHaveBeenCalledTimes(3)
+    expect(spyFocusPine).toHaveBeenCalledTimes(1)
+    expect(spyFocusBana).toHaveBeenCalledTimes(0)
+    expect(spyFocusPlum).toHaveBeenCalledTimes(1)
   })
 
   // TODO: Write tests for disabled and aria-disabled ld-select