Merge pull request #3288 from github/koesie10/suggest-box-tab

Allow using Tab to select the active option in the suggest box

Author: koesie10

extensions/ql-vscode/src/view/common/SuggestBox/SuggestBox.tsx

@@ -207,9 +207,9 @@ export const SuggestBox = <
           "aria-autocomplete": "list",
           "aria-label": ariaLabel,
           onKeyDown: (event) => {
-            // When the user presses the enter key, select the active item
+            // When the user presses the enter or tab key, select the active item
             if (
-              event.key === "Enter" &&
+              (event.key === "Enter" || event.key === "Tab") &&
               activeIndex !== null &&
               suggestionItems[activeIndex]
             ) {

extensions/ql-vscode/src/view/common/SuggestBox/__tests__/SuggestBox.test.tsx

@@ -161,14 +161,58 @@ describe("SuggestBox", () => {
     expect(screen.getByRole("option")).toHaveTextContent("Parameter[1]");
   });
 
-  it("closes the options when selecting an option", async () => {
+  it("selects an option using Enter", async () => {
     render({
       value: "Argument[block].1",
     });
 
     await userEvent.click(screen.getByRole("combobox"));
     await userEvent.keyboard("{Enter}");
 
+    expect(onChange).toHaveBeenCalledWith("Argument[block].Parameter[1]");
+  });
+
+  it("selects an option using Tab", async () => {
+    render({
+      value: "Argument[block].1",
+    });
+
+    await userEvent.click(screen.getByRole("combobox"));
+    await userEvent.keyboard("{Enter}");
+
+    expect(onChange).toHaveBeenCalledWith("Argument[block].Parameter[1]");
+  });
+
+  it("does not select an option using Home", async () => {
+    render({
+      value: "Argument[block].1",
+    });
+
+    await userEvent.click(screen.getByRole("combobox"));
+    await userEvent.keyboard("{Home}");
+
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it("closes the options when selecting an option using Enter", async () => {
+    render({
+      value: "Argument[block].1",
+    });
+
+    await userEvent.click(screen.getByRole("combobox"));
+    await userEvent.keyboard("{Enter}");
+
+    expect(screen.queryByRole("option")).not.toBeInTheDocument();
+  });
+
+  it("closes the options when selecting an option using Tab", async () => {
+    render({
+      value: "Argument[block].1",
+    });
+
+    await userEvent.click(screen.getByRole("combobox"));
+    await userEvent.keyboard("{Tab}");
+
     expect(screen.queryByRole("option")).not.toBeInTheDocument();
   });