fix: prevent pages from receiving KBarResults' keyboard events

When interacting with KBarResults, `UpArrow`, `DownArrow`, and `Enter` keyboard events propagate, and can be received by the webpage underneath it. This patch invokes `stopPropagation()` on the events, and converts their listeners from bubbling to capturing, to ensure priority event handling.

Author: zenoamaro

src/KBarResults.tsx

@@ -48,6 +48,7 @@ export const KBarResults: React.FC<KBarResultsProps> = (props) => {
 
       if (event.key === "ArrowUp" || (event.ctrlKey && event.key === "p")) {
         event.preventDefault();
+        event.stopPropagation();
         query.setActiveIndex((index) => {
           let nextIndex = index > START_INDEX ? index - 1 : index;
           // avoid setting active index on a group
@@ -62,6 +63,7 @@ export const KBarResults: React.FC<KBarResultsProps> = (props) => {
         (event.ctrlKey && event.key === "n")
       ) {
         event.preventDefault();
+        event.stopPropagation();
         query.setActiveIndex((index) => {
           let nextIndex =
             index < itemsRef.current.length - 1 ? index + 1 : index;
@@ -74,15 +76,16 @@ export const KBarResults: React.FC<KBarResultsProps> = (props) => {
         });
       } else if (event.key === "Enter") {
         event.preventDefault();
+        event.stopPropagation();
         // storing the active dom element in a ref prevents us from
         // having to calculate the current action to perform based
         // on the `activeIndex`, which we would have needed to add
         // as part of the dependencies array.
         activeRef.current?.click();
       }
     };
-    window.addEventListener("keydown", handler);
-    return () => window.removeEventListener("keydown", handler);
+    window.addEventListener("keydown", handler, {capture: true});
+    return () => window.removeEventListener("keydown", handler, {capture: true});
   }, [query]);
 
   // destructuring here to prevent linter warning to pass