Fixed #494:Add descriptive placeholder text for Select dropdown

sadanandpai · Nov 12, 2024 · 453b083 · 453b083
1 parent f91ca31
commit 453b083
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 0 deletions.
diff --git a/apps/host/src/components/common/multi-select/multi-select.tsx b/apps/host/src/components/common/multi-select/multi-select.tsx
@@ -31,12 +31,14 @@ interface Props {
   width?: string;
   optionSelected: OptionType[] | null;
   setOptionSelected: (selected: OptionType[]) => void;
+  selectPlaceholder?: string;
 }
 const CustomSelect: React.FC<Props> = ({
   data,
   width = '100%',
   optionSelected,
   setOptionSelected,
+  selectPlaceholder,
 }) => {
   const { theme } = useContext(ThemeContext);
   const handleChange = (selected: OptionType[]) => {
@@ -55,6 +57,7 @@ const CustomSelect: React.FC<Props> = ({
         }}
         onChange={(newValue: unknown) => handleChange(newValue as OptionType[])}
         value={optionSelected}
+        placeholder={selectPlaceholder}
         styles={{
           control: (base) => ({
             ...base,

diff --git a/apps/host/src/components/modules/challenges/challenge-grid/challenge-filter.tsx b/apps/host/src/components/modules/challenges/challenge-grid/challenge-filter.tsx
@@ -72,12 +72,14 @@ const ChallengeFilters = ({
         data={DeveloperList}
         optionSelected={optionSelected}
         setOptionSelected={(val: OptionType[]) => setOptionSelected(val)}
+        selectPlaceholder="Select Developers"
       />
 
       <CustomSelect
         data={Difficulties}
         optionSelected={selectedDifficulties}
         setOptionSelected={(val: OptionType[]) => setSelectedDifficulties(val)}
+        selectPlaceholder="Select Difficulties"
       />
       <CustomCheckbox
         className={styles.checkbox}