From 4e1354d119faf532060a3630f8e07f5277569639 Mon Sep 17 00:00:00 2001
From: Nicolas DUBIEN <github@dubien.org>
Date: Mon, 18 Dec 2023 09:19:42 +0000
Subject: [PATCH] fix: allow matches on words far in the label

The current settings passed to fuse.js, make it unable to match something appearing very far in the label. In other words, if the label is made of 10 words and the query of the user aim to select on the 10th word, you'll never get the item.

With this PR I suggest to relax this constraint by asking fuse.js to ignore the location when performing its searches.

It should fixes the issue #337.
---
 src/__tests__/useMatches.test.tsx | 38 +++++++++++++++++++++++++++++++
 src/useMatches.tsx                |  1 +
 2 files changed, 39 insertions(+)

diff --git a/src/__tests__/useMatches.test.tsx b/src/__tests__/useMatches.test.tsx
index 49070be..845e5d2 100644
--- a/src/__tests__/useMatches.test.tsx
+++ b/src/__tests__/useMatches.test.tsx
@@ -89,6 +89,25 @@ function WithPriorityComponent() {
   );
 }
 
+function WithLongNamesComponent() {
+  const action1 = createAction({
+    name: "Action: This is a long name ending by toto",
+  });
+  const action2 = createAction({
+    name: "Action: This is a long name also ending by toto",
+  });
+  const action3 = createAction({
+    name: "Action: This is a long name ending by titi",
+  });
+
+  return (
+    <KBarProvider actions={[action1, action2, action3]}>
+      <Search />
+      <Results />
+    </KBarProvider>
+  );
+}
+
 const setup = (Component: React.ComponentType) => {
   const utils = render(<Component />);
   const input = utils.getByLabelText("search-input");
@@ -143,4 +162,23 @@ describe("useMatches", () => {
       expect(utils.queryAllByText(/Section 1/i));
     });
   });
+  describe("With long names", () => {
+    let utils: Utils;
+    beforeEach(() => {
+      utils = setup(WithLongNamesComponent);
+    });
+
+    it("returns result matching the query even if match is on a word far in the name", () => {
+      const { input } = utils;
+      fireEvent.change(input, { target: { value: "toto" } });
+      const results = utils.getAllByText(/Action/i);
+      expect(results.length).toEqual(2);
+      expect(results[0].textContent).toEqual(
+        "Action: This is a long name ending by toto"
+      );
+      expect(results[1].textContent).toEqual(
+        "Action: This is a long name also ending by toto"
+      );
+    });
+  });
 });
diff --git a/src/useMatches.tsx b/src/useMatches.tsx
index 595fc86..b666437 100644
--- a/src/useMatches.tsx
+++ b/src/useMatches.tsx
@@ -22,6 +22,7 @@ const fuseOptions: Fuse.IFuseOptions<ActionImpl> = {
     },
     "subtitle",
   ],
+  ignoreLocation: true,
   includeScore: true,
   includeMatches: true,
   threshold: 0.2,