Fix SegmentedControl to handle invalid selected values gracefully

.changeset/fix-segmented-control-text.md

@@ -0,0 +1,6 @@
+---
+"@audius/harmony": patch
+"@audius/web": patch
+---
+
+Fix SegmentedControl text color being subdued on initial render when selected value doesn't match any option key

packages/harmony/src/components/segmented-control/SegmentedControl.tsx

@@ -42,7 +42,12 @@ export const SegmentedControl = <T extends string>(
   const [localSelected, setLocalSelected] = useState(options[0]?.key ?? '')
   const [maxOptionWidth, setMaxOptionWidth] = useState(0)
 
-  const selectedOption = selected ?? localSelected
+  const rawSelectedOption = selected ?? localSelected
+  // If the selected value doesn't match any option, fall back to the first option
+  const selectedOption =
+    options.some((option) => option.key === rawSelectedOption)
+      ? rawSelectedOption
+      : options[0]?.key ?? rawSelectedOption
 
   const onSetSelected = (option: T) => {
     // Call props function if controlled

packages/web/src/pages/upload-page/components/TracksPreview.tsx

@@ -59,7 +59,11 @@ export const TracksPreview = (props: TracksPreviewProps) => {
         <SegmentedControl
           label={messages.releaseType}
           onSelectOption={handleOptionSelect}
-          selected={String(uploadType)}
+          selected={String(
+            uploadType === UploadType.INDIVIDUAL_TRACK
+              ? UploadType.INDIVIDUAL_TRACKS
+              : uploadType
+          )}
           options={[
             { key: String(UploadType.INDIVIDUAL_TRACKS), text: 'Tracks' },
             { key: String(UploadType.ALBUM), text: 'Album' },