Search Dialog: Dynamically Set Maximum Cursor Pointable Item

[babblebey]

Currently, the ArrowUp and ArrowDown keybind functionality on the Search Dialog Results limits the cursor movement to a maximum of 9 items in the search result. This limitation can be restrictive when there are more than 9 items in the search result. To improve user experience and allow for flexible cursor movement, we should dynamically set the maximum cursor pointable item based on the length of the search result.

screencast-localhost_4321-2024.06.07-22_53_07.webm

Task

1. Replace Fixed Limit: Replace the fixed limit of 9 with the length of the search result array.

    if (resultsCount && e.key === "ArrowUp") {
      e.preventDefault();
      setCursor(cursor === 0 ? Math.min(resultsCount - 1, 9) : cursor - 1);
    }
    if (resultsCount && e.key === "ArrowDown") {
      e.preventDefault();
      setCursor(cursor === Math.min(resultsCount - 1, 9) ? 0 : cursor + 1);
    }

Implementation Steps

1. Set Maximum Cursor Pointable Item:

   • Use the length of the search result array to dynamically set the maximum pointable item by replacing the hardcoded 9 in the handleKeyboardCtrl handler in the file below with searchResult.length i.e. resultsCounts

   • File: https://github.com/devjargons/jargons.dev/blob/main/src/components/islands/search.jsx

Acceptance Criteria

• The ArrowUp and ArrowDown keybind functionality should dynamically set the maximum cursor pointable item based on the length of the search result array.
• The cursor position should be updated accordingly to prevent it from exceeding the maximum pointable item.

Additional Information

This enhancement will allow users to navigate through the search results more effectively, especially when there are more than 9 items in the search result.

[Bridgetamana]

please assign this to me

[babblebey]

Hey @Bridgetamana, have at it 😉

Don't hesitate to ask questions if you need any clarity following the steps.