fix: style tweaks for MultiSelect component (#3354)

open-sauced · May 9, 2024 · 6cf9f99 · 6cf9f99
1 parent 2a348d9
commit 6cf9f99
Showing 1 changed file with 4 additions and 3 deletions.
diff --git a/components/atoms/Select/multi-select.tsx b/components/atoms/Select/multi-select.tsx
@@ -29,7 +29,7 @@ const MultiSelect = ({
   selected,
   handleSelect,
   className,
-  placeholder,
+  placeholder = "Select Items",
   handleKeyDown,
   inputPlaceholder,
   setSelected,
@@ -51,15 +51,16 @@ const MultiSelect = ({
             aria-controls="select-menu-list"
             role="combobox"
             aria-expanded={open}
-            className="flex items-center justify-between text-foreground"
+            className="flex items-center justify-between text-foreground before:content-[attr(data-inset-label)] before:mr-1 before:font-normal before:text-slate-500"
+            data-inset-label={placeholder}
           >
             {selected.length > 0 ? (
               <span className="truncate">
                 {selected[0].label}
                 {selected.length > 1 ? `, +${selected.length - 1}` : null}
               </span>
             ) : (
-              <span className="opacity-50">{placeholder ?? "Select Items"}</span>
+              <span className="sr-only">{placeholder}</span>
             )}
 
             {selected.length > 0 ? (