diff --git a/.changeset/fix-segmented-control-text.md b/.changeset/fix-segmented-control-text.md new file mode 100644 index 00000000000..71f274e6541 --- /dev/null +++ b/.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 diff --git a/packages/harmony/src/components/segmented-control/SegmentedControl.tsx b/packages/harmony/src/components/segmented-control/SegmentedControl.tsx index 516aa3e0bcb..e0e0bf75fc3 100644 --- a/packages/harmony/src/components/segmented-control/SegmentedControl.tsx +++ b/packages/harmony/src/components/segmented-control/SegmentedControl.tsx @@ -42,7 +42,12 @@ export const SegmentedControl = ( 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 diff --git a/packages/web/src/pages/upload-page/components/TracksPreview.tsx b/packages/web/src/pages/upload-page/components/TracksPreview.tsx index 2419a2190f0..92fcc78d89d 100644 --- a/packages/web/src/pages/upload-page/components/TracksPreview.tsx +++ b/packages/web/src/pages/upload-page/components/TracksPreview.tsx @@ -59,7 +59,11 @@ export const TracksPreview = (props: TracksPreviewProps) => {