From 7f70b2874c9d9d54b4aa1e87ceaa629726a467f1 Mon Sep 17 00:00:00 2001
From: abefernan <44572727+abefernan@users.noreply.github.com>
Date: Mon, 1 Jul 2024 00:30:32 +0200
Subject: [PATCH] Add CommandList. Fix typo. Remove nullcheck

---
 components/SelectValidator.tsx | 54 ++++++++++++++++++----------------
 1 file changed, 28 insertions(+), 26 deletions(-)

diff --git a/components/SelectValidator.tsx b/components/SelectValidator.tsx
index 13d3bc2..d07ec6a 100644
--- a/components/SelectValidator.tsx
+++ b/components/SelectValidator.tsx
@@ -7,6 +7,7 @@ import {
   CommandGroup,
   CommandInput,
   CommandItem,
+  CommandList,
 } from "@/components/ui/command";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { useChains } from "@/context/ChainsContext";
@@ -39,9 +40,8 @@ export default function SelectValidator({
           className="mb-4 w-full max-w-[300px] justify-between border-white bg-fuchsia-900 hover:bg-fuchsia-900"
         >
           {validatorAddress
-            ? validators?.find(
-                (validatorItem) => validatorAddress === validatorItem.operatorAddress,
-              )?.description.moniker || "Unknown validator"
+            ? validators.find((validatorItem) => validatorAddress === validatorItem.operatorAddress)
+                ?.description.moniker || "Unknown validator"
             : "Select validator…"}
           <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
         </Button>
@@ -53,29 +53,31 @@ export default function SelectValidator({
             value={searchText}
             onValueChange={setSearchText}
           />
-          <CommandEmpty>No framework found.</CommandEmpty>
-          <CommandGroup className="max-h-[400px] overflow-y-auto">
-            {validators?.map((validatorItem) => (
-              <CommandItem
-                className="aria-selected:bg-fuchsia-800"
-                key={validatorItem.operatorAddress}
-                onSelect={() => {
-                  setValidatorAddress(validatorItem.operatorAddress);
-                  setOpen(false);
-                }}
-              >
-                <Check
-                  className={cn(
-                    "mr-2 h-4 w-4",
-                    validatorAddress === validatorItem.operatorAddress
-                      ? "opacity-100"
-                      : "opacity-0",
-                  )}
-                />
-                {validatorItem.description.moniker}
-              </CommandItem>
-            ))}
-          </CommandGroup>
+          <CommandEmpty>No validators found.</CommandEmpty>
+          <CommandList>
+            <CommandGroup>
+              {validators.map((validatorItem) => (
+                <CommandItem
+                  className="aria-selected:bg-fuchsia-800"
+                  key={validatorItem.operatorAddress}
+                  onSelect={() => {
+                    setValidatorAddress(validatorItem.operatorAddress);
+                    setOpen(false);
+                  }}
+                >
+                  <Check
+                    className={cn(
+                      "mr-2 h-4 w-4",
+                      validatorAddress === validatorItem.operatorAddress
+                        ? "opacity-100"
+                        : "opacity-0",
+                    )}
+                  />
+                  {validatorItem.description.moniker}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
         </Command>
       </PopoverContent>
     </Popover>