From 976b6cf68ef1dd6c8c071d4a0bf12106498b5708 Mon Sep 17 00:00:00 2001
From: Diogenes Fernandes <diofeher@gmail.com>
Date: Tue, 14 Jan 2025 17:33:54 -0300
Subject: [PATCH] Fix the behaviour when enter is typed when results are
 loading

Signed-off-by: Diogenes Fernandes <diofeher@gmail.com>
---
 frontend/src/components/Search/index.tsx | 24 ++++++++++++++++--------
 1 file changed, 16 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/Search/index.tsx b/frontend/src/components/Search/index.tsx
index 249681c9..34fd610c 100644
--- a/frontend/src/components/Search/index.tsx
+++ b/frontend/src/components/Search/index.tsx
@@ -4,20 +4,21 @@ import {
   ComboboxOption,
   ComboboxOptions,
 } from "@headlessui/react";
-import { useQuery } from "@tanstack/react-query";
+import { SearchResult, SearchResultType } from "./types";
 import { useEffect, useMemo, useRef, useState } from "react";
-import { useNavigate } from "react-router-dom";
-import { getSearchQuery } from "../../q";
-import { search } from "../../icons/search";
+
 import { Icon } from "../Icon";
-import { SearchResult, SearchResultType } from "./types";
+import { Paragraph } from "../Paragraph";
 import { SearchModuleResult } from "./ModuleResult";
-import { SearchProviderResult } from "./ProviderResult";
 import { SearchOtherResult } from "./OtherResult";
-import { definitions } from "@/api";
+import { SearchProviderResult } from "./ProviderResult";
 import clsx from "clsx";
+import { definitions } from "@/api";
+import { getSearchQuery } from "../../q";
+import { search } from "../../icons/search";
 import { useDebouncedValue } from "@/hooks/useDebouncedValue";
-import { Paragraph } from "../Paragraph";
+import { useNavigate } from "react-router-dom";
+import { useQuery } from "@tanstack/react-query";
 
 function getSearchResultType(value: string) {
   switch (value) {
@@ -187,6 +188,12 @@ export function Search({
   const canShowNoResultsInfo = filtered.length === 0 && !canShowLoadingInfo;
   const canShowResults = !canShowLoadingInfo && !canShowNoResultsInfo;
 
+  const onKeyDown = (event: React.KeyboardEvent<HTMLInputElement>, cannotPressEnter: boolean) => {
+    if (event.code === "Enter" && cannotPressEnter) {
+      event.preventDefault();
+    }
+  };
+
   return (
     <Combobox
       onChange={(v: SearchResult) => {
@@ -213,6 +220,7 @@ export function Search({
           ref={inputRef}
           value={query}
           onChange={(event) => onChange(event.target.value)}
+          onKeyDown={(event) => onKeyDown(event, canShowLoadingInfo)}
           placeholder={placeholder}
           className={clsx(
             "relative block w-full appearance-none border border-transparent bg-gray-200 px-4 text-inherit placeholder:text-gray-500 focus:border-brand-700 focus:outline-none dark:bg-gray-800",