Fix dropdown to top and add fix height to dropdown menu (#299)

mlcommons · Sep 3, 2024 · ef25b4c · ef25b4c
1 parent 9bf4781
commit ef25b4c
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 14 deletions.
diff --git a/...ateSamples/CreateSamples/AnnotationInterfaces/Contexts/SelectMultipleTextMultipleTags.tsx b/...ateSamples/CreateSamples/AnnotationInterfaces/Contexts/SelectMultipleTextMultipleTags.tsx
@@ -284,7 +284,7 @@ const SelectMultipleTextMultipleTags: FC<
                 </Button>
               </div>
             </div>
-            <div className="my-8 gap-4 grid grid-cols-3">
+            <div className="my-3 gap-4 grid grid-cols-3 sticky top-4">
               <div className="col-span-2">
                 <DropdownSearch
                   options={localTags}
@@ -311,7 +311,7 @@ const SelectMultipleTextMultipleTags: FC<
                 })}
               />
             </div>
-            <div>
+            <div className="mt-3">
               <MultiSelect
                 options={
                   generative_context?.artifacts?.additional_label?.options

diff --git a/frontends/web/src/new_front/components/Inputs/DropdownSearch.tsx b/frontends/web/src/new_front/components/Inputs/DropdownSearch.tsx
@@ -73,18 +73,20 @@ const DropdownSearch: FC<DropdownSearchProps> = ({
             value={searchTerm}
             onChange={(e) => setSearchTerm(e.target.value)}
           />
-          {filteredOptions.map((option, key) => (
-            <button
-              key={key}
-              type="button"
-              className="block w-full px-4 py-2 text-left text-gray-700 border-solid rounded-sm focus:outline-none hover:bg-gray-100 hover:text-gray-900"
-              role="menuitem"
-              onClick={() => handleOnClick(option)}
-              disabled={disabled}
-            >
-              {option.value}
-            </button>
-          ))}
+          <div className="max-h-96 overflow-y-auto mt-2">
+            {filteredOptions.map((option, key) => (
+              <button
+                key={key}
+                type="button"
+                className="block w-full px-4 py-2 text-left text-gray-700 border-solid rounded-sm focus:outline-none hover:bg-gray-100 hover:text-gray-900"
+                role="menuitem"
+                onClick={() => handleOnClick(option)}
+                disabled={disabled}
+              >
+                {option.value}
+              </button>
+            ))}
+          </div>
         </div>
       </div>
     </div>