Fix PageDown/PageUp scroll when slash menu is open (#2317)

* fix: update CreateLinkButton to be able to toggle popover visibility

Resolve #2313

* Fix PageDown/PageUp scroll when slash menu is open

* Small fix

* Moved page up/down handling to keyboard navigation hook

* Added e2e test

---------

Co-authored-by: jbpenrath <jb.penrath@gmail.com>
Co-authored-by: Matthew Lipski <matthewlipski@gmail.com>
Co-authored-by: Matthew Lipski <50169049+matthewlipski@users.noreply.github.com>

Author: 3 people

packages/react/src/components/SuggestionMenu/hooks/useSuggestionMenuKeyboardHandler.ts

@@ -4,7 +4,7 @@ import React, { useState } from "react";
 // & down arrow keys are used to select an item, enter is used to execute it.
 export function useSuggestionMenuKeyboardHandler<Item>(
   items: Item[],
-  onItemClick?: (item: Item) => void
+  onItemClick?: (item: Item) => void,
 ) {
   const [selectedIndex, setSelectedIndex] = useState<number>(0);
 
@@ -23,7 +23,6 @@ export function useSuggestionMenuKeyboardHandler<Item>(
       }
 
       if (event.key === "ArrowDown") {
-        // debugger;
         event.preventDefault();
 
         if (items.length) {
@@ -33,6 +32,26 @@ export function useSuggestionMenuKeyboardHandler<Item>(
         return true;
       }
 
+      if (event.key === "PageUp") {
+        event.preventDefault();
+
+        if (items.length) {
+          setSelectedIndex(0);
+        }
+
+        return true;
+      }
+
+      if (event.key === "PageDown") {
+        event.preventDefault();
+
+        if (items.length) {
+          setSelectedIndex(items.length - 1);
+        }
+
+        return true;
+      }
+
       const isComposing = isReactEvent(event)
         ? event.nativeEvent.isComposing
         : event.isComposing;
@@ -53,7 +72,7 @@ export function useSuggestionMenuKeyboardHandler<Item>(
 }
 
 function isReactEvent(
-  event: KeyboardEvent | React.KeyboardEvent
+  event: KeyboardEvent | React.KeyboardEvent,
 ): event is React.KeyboardEvent {
   return (event as React.KeyboardEvent).nativeEvent !== undefined;
 }

tests/src/end-to-end/slashmenu/slashmenu.test.ts

@@ -27,6 +27,15 @@ test.describe("Check SlashMenu Functionality", () => {
     await focusOnEditor(page);
     await openSlashMenu(page);
   });
+  test("Should be able to use PageUp/Down to navigate", async ({ page }) => {
+    await focusOnEditor(page);
+    await openSlashMenu(page);
+    await page.waitForTimeout(500);
+    await page.keyboard.press("PageDown");
+    expect(await page.screenshot()).toMatchSnapshot("slash_menu_page_down.png");
+    await page.keyboard.press("PageUp");
+    expect(await page.screenshot()).toMatchSnapshot("slash_menu_page_up.png");
+  });
   test("Should be able to create h1", async ({ page }) => {
     await focusOnEditor(page);
     await executeSlashCommand(page, "h1");