feat: added page up and page down behaviors

formwerkjs · Aug 30, 2024 · 17e1ac7 · 17e1ac7
1 parent 62304f6
commit 17e1ac7
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 2 deletions.
diff --git a/packages/core/src/useSelect/useListBox.ts b/packages/core/src/useSelect/useListBox.ts
@@ -97,7 +97,7 @@ export function useListBox<TOption, TValue = TOption>(
         return;
       }
 
-      if (e.code === 'Home') {
+      if (e.code === 'Home' || e.code === 'PageUp') {
         e.preventDefault();
         e.stopPropagation();
         if (isShiftPressed.value) {
@@ -108,7 +108,7 @@ export function useListBox<TOption, TValue = TOption>(
         return;
       }
 
-      if (e.code === 'End') {
+      if (e.code === 'End' || e.code === 'PageDown') {
         e.preventDefault();
         e.stopPropagation();
         if (isShiftPressed.value) {

diff --git a/packages/core/src/useSelect/useSelect.spec.ts b/packages/core/src/useSelect/useSelect.spec.ts
@@ -267,6 +267,27 @@ describe('keyboard features for a single select', () => {
     expect(screen.getAllByRole('option')[0]).toHaveFocus();
   });
 
+  test('Pressing PageUp should Move focus to the first option', async () => {
+    await (await renderSelect()).open();
+    const listbox = screen.getByRole('listbox');
+
+    await fireEvent.keyDown(listbox, { code: 'End' });
+    await flush();
+    expect(screen.getAllByRole('option')[2]).toHaveFocus();
+    await fireEvent.keyDown(listbox, { code: 'PageUp' });
+    await flush();
+    expect(screen.getAllByRole('option')[0]).toHaveFocus();
+  });
+
+  test('Pressing PageDown should Move focus to the first option', async () => {
+    await (await renderSelect()).open();
+    const listbox = screen.getByRole('listbox');
+
+    await fireEvent.keyDown(listbox, { code: 'PageDown' });
+    await flush();
+    expect(screen.getAllByRole('option')[2]).toHaveFocus();
+  });
+
   test('Pressing ArrowUp should Move focus through the options backwards and stays at the top', async () => {
     await (await renderSelect()).open();
     const listbox = screen.getByRole('listbox');
@@ -429,6 +450,18 @@ describe('keyboard features for a multi select', () => {
     expect(screen.getAllByRole('option')[1]).toBeChecked();
   });
 
+  test('Shift + PageUp should select all options from the first to the toggled option', async () => {
+    await (await renderSelect()).open();
+
+    const listbox = screen.getByRole('listbox');
+    await fireEvent.keyDown(listbox, { code: 'ArrowDown' });
+    await fireEvent.keyDown(listbox, { code: 'ShiftLeft' });
+    await fireEvent.keyDown(listbox, { code: 'PageUp' });
+    await flush();
+    expect(screen.getAllByRole('option')[0]).toBeChecked();
+    expect(screen.getAllByRole('option')[1]).toBeChecked();
+  });
+
   test('Shift + End should select all options from the first to the toggled option', async () => {
     await (await renderSelect()).open();
 
@@ -441,6 +474,18 @@ describe('keyboard features for a multi select', () => {
     expect(screen.getAllByRole('option')[2]).toBeChecked();
   });
 
+  test('Shift + PageDown should select all options from the first to the toggled option', async () => {
+    await (await renderSelect()).open();
+
+    const listbox = screen.getByRole('listbox');
+    await fireEvent.keyDown(listbox, { code: 'ArrowDown' });
+    await fireEvent.keyDown(listbox, { code: 'ShiftLeft' });
+    await fireEvent.keyDown(listbox, { code: 'PageDown' });
+    await flush();
+    expect(screen.getAllByRole('option')[1]).toBeChecked();
+    expect(screen.getAllByRole('option')[2]).toBeChecked();
+  });
+
   test('Control + A should select all options', async () => {
     await (await renderSelect()).open();