fix: Issue #1374 All suggestions are being displayed with scroll area (…

…#1380) Signed-off-by: Aryan Singh <114330931+aryanas159@users.noreply.github.com>
open-sauced · Jul 18, 2023 · 1de56c7 · 1de56c7
1 parent 9716f9a
commit 1de56c7
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 13 deletions.
diff --git a/components/atoms/Search/search.tsx b/components/atoms/Search/search.tsx
@@ -2,6 +2,8 @@ import React, { useEffect, useState } from "react";
 import { GrClose } from "react-icons/gr";
 import { FaSearch } from "react-icons/fa";
 import { Spinner } from "../SpinLoader/spin-loader";
+import { ScrollArea } from "../ScrollArea/scroll-area";
+
 interface SearchProps {
   name: string;
   value?: string;
@@ -83,19 +85,20 @@ const Search = ({
         onFocus={() => setShowSuggestions(true)}
         onBlur={() => setTimeout(() => setShowSuggestions(false), 500)}
       />
-
       {suggestions && suggestions.length > 0 && showSuggestions && (
         <div className="absolute left-0 z-10 w-full pb-1 space-y-1 bg-white border rounded-lg cursor-pointer shadow-input border-light-slate-6 top-full">
-          {suggestions.map((suggestion, index) => (
-            <div
-              className="px-4 py-2 overflow-hidden break-all text-light-slate-9 hover:bg-light-slate-2"
-              style={suggestionsStyle}
-              key={index}
-              onClick={() => handleOnSelect(suggestion)}
-            >
-              <span className="pl-5 text-sm ">{suggestion}</span>
-            </div>
-          ))}
+          <ScrollArea type="auto" className="h-60">
+            {suggestions.map((suggestion, index) => (
+              <div
+                className="px-4 py-2 overflow-hidden break-all text-light-slate-9 hover:bg-light-slate-2"
+                style={suggestionsStyle}
+                key={index}
+                onClick={() => handleOnSelect(suggestion)}
+              >
+                <span className="pl-5 text-sm ">{suggestion}</span>
+              </div>
+            ))}
+          </ScrollArea>
         </div>
       )}
 

diff --git a/components/molecules/TableHeader/table-header.tsx b/components/molecules/TableHeader/table-header.tsx
@@ -64,7 +64,6 @@ const TableHeader = ({
     if (req.ok) {
       const res = await req.json();
       const suggestions = res.items.map((item: any) => item.full_name);
-      if (suggestions.length > 5) suggestions.length = 5;
       setSuggestions(suggestions);
     }
   }, 250);

diff --git a/components/organisms/InsightPage/InsightPage.tsx b/components/organisms/InsightPage/InsightPage.tsx
@@ -325,7 +325,6 @@ const InsightPage = ({ edit, insight, pageRepos }: InsightPageProps) => {
     if (req.ok) {
       const res = await req.json();
       const suggestions = res.items.map((item: any) => item.full_name);
-      if (suggestions.length > 5) suggestions.length = 5;
       setSuggestions(suggestions);
     }
   }, 250);