fix dropdown styling in selectField

Author: juliawegmayr

demo/site/src/common/components/form/SelectField.module.scss

@@ -19,7 +19,7 @@
 
 .selectField {
     display: flex;
-    height: 48px;
+    height: 40px;
     padding: 0 var(--spacing-s300);
     align-items: center;
     justify-content: space-between;
@@ -84,10 +84,17 @@
     font-size: 16px;
     color: var(--contact-form-text-input-text);
     box-sizing: border-box;
-    border-radius: 4px;
 
     &:hover {
-        background-color: var(--Contact-Form-dropdown-bg-hover, #f5f5f5);
+        background-color: var(--contact-form-dropdown-bg-hover);
+    }
+
+    &--selected {
+        background-color: var(--contact-form-dropdown-bg-selected);
+
+        &:hover {
+            background-color: var(--contact-form-dropdown-bg-selected-hover);
+        }
     }
 }
 

demo/site/src/common/components/form/SelectField.tsx

@@ -13,6 +13,11 @@ interface SelectFieldProps {
     placeholder?: string;
 }
 
+type SelectedOption = {
+    value: string;
+    label: string;
+} | null;
+
 export function SelectField({
     label,
     optional = false,
@@ -25,14 +30,14 @@ export function SelectField({
     placeholder = "Select an option",
 }: SelectFieldProps): React.ReactElement {
     const [isOpen, setIsOpen] = useState(false);
-    const [selectedOption, setSelectedOption] = useState<string | null>(null);
+    const [selectedOption, setSelectedOption] = useState<SelectedOption | null>(null);
 
     const handleToggle = () => {
         setIsOpen(!isOpen);
     };
 
     const handleSelectOption = (value: string, label: string) => {
-        setSelectedOption(label);
+        setSelectedOption({ value, label });
         setIsOpen(false);
     };
 
@@ -46,7 +51,7 @@ export function SelectField({
             </div>
             <div className={styles.selectWrapper}>
                 <button type="button" className={styles.selectField} onClick={handleToggle}>
-                    <span className={selectedOption ? styles.selectedText : styles.placeholderText}>{selectedOption || placeholder}</span>
+                    <span className={selectedOption ? styles.selectedText : styles.placeholderText}>{selectedOption?.label || placeholder}</span>
                     <SvgUse
                         href="/assets/icons/chevron-down.svg#root"
                         className={clsx(styles.chevron, isOpen && styles["chevron--expanded"])}
@@ -57,7 +62,11 @@ export function SelectField({
                 {isOpen && (
                     <div className={styles.dropdown}>
                         {options.map((option) => (
-                            <div key={option.value} className={styles.dropdownOption} onClick={() => handleSelectOption(option.value, option.label)}>
+                            <div
+                                key={option.value}
+                                className={clsx(styles.dropdownOption, selectedOption?.value === option.value && styles["dropdownOption--selected"])}
+                                onClick={() => handleSelectOption(option.value, option.label)}
+                            >
                                 {option.label}
                             </div>
                         ))}