From 2b3aff1903b6f16b960b27fd181bebc25f2da406 Mon Sep 17 00:00:00 2001
From: Nate Kelley <nate@buster.so>
Date: Mon, 3 Mar 2025 12:53:37 -0700
Subject: [PATCH] disabled state for select multiple

---
 .../components/features/modal/NewTermModal/NewTermModal.tsx  | 3 ++-
 web/src/components/ui/select/SelectMultiple.tsx              | 5 ++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/web/src/components/features/modal/NewTermModal/NewTermModal.tsx b/web/src/components/features/modal/NewTermModal/NewTermModal.tsx
index b5e845a86..5e3347a55 100644
--- a/web/src/components/features/modal/NewTermModal/NewTermModal.tsx
+++ b/web/src/components/features/modal/NewTermModal/NewTermModal.tsx
@@ -116,7 +116,7 @@ const DatasetListContainer: React.FC<{
   selectedDatasets: string[];
   setSelectedDatasets: React.Dispatch<React.SetStateAction<string[]>>;
 }> = React.memo(({ selectedDatasets, setSelectedDatasets }) => {
-  const { data: datasetsList, isLoading } = useGetDatasets();
+  const { data: datasetsList, isLoading, isFetched } = useGetDatasets();
 
   const onChange = useMemoizedFn((v: string[]) => {
     setSelectedDatasets(v);
@@ -134,6 +134,7 @@ const DatasetListContainer: React.FC<{
   return (
     <SelectMultiple
       items={selectOptions}
+      disabled={!isFetched}
       onSelect={onChange}
       placeholder="Select a dataset"
       value={selectedDatasets}
diff --git a/web/src/components/ui/select/SelectMultiple.tsx b/web/src/components/ui/select/SelectMultiple.tsx
index f0336c753..2a6984402 100644
--- a/web/src/components/ui/select/SelectMultiple.tsx
+++ b/web/src/components/ui/select/SelectMultiple.tsx
@@ -16,6 +16,7 @@ interface SelectMultipleProps extends VariantProps<typeof selectVariants> {
   className?: string;
   placeholder?: string;
   value: string[];
+  disabled?: boolean;
 }
 
 export const SelectMultiple: React.FC<SelectMultipleProps> = React.memo(
@@ -26,7 +27,8 @@ export const SelectMultiple: React.FC<SelectMultipleProps> = React.memo(
     placeholder = 'Select items...',
     size = 'default',
     variant = 'default',
-    value
+    value,
+    disabled
   }) => {
     const selectedRecord = useMemo(() => {
       return itemsProp.reduce<Record<string, boolean>>((acc, item) => {
@@ -80,6 +82,7 @@ export const SelectMultiple: React.FC<SelectMultipleProps> = React.memo(
             selectVariants({ variant, size }),
             'relative overflow-hidden pr-0',
             selectedItems.length > 0 && 'pl-1!',
+            disabled && 'cursor-not-allowed opacity-80',
             className
           )}>
           <div className="scrollbar-hide flex h-full flex-nowrap items-center gap-1 overflow-x-auto">