Fix Searchable Selects

src/components/settings/tabs/sync/CloudTab.tsx

@@ -123,14 +123,15 @@ function CloudTab() {
                 Choose which cloud backend to use for storing your settings. You can switch between Equicord's and Vencord's cloud services, or use a self-hosted instance.
             </Paragraph>
 
-            <SearchableSelect
-                options={cloudBackendOptions}
-                value={cloudBackendOptions.find(o => o.value === cloud.url)}
-                onChange={v => changeUrl(v)}
-                className={Margins.bottom16}
-                closeOnSelect={true}
-                renderOptionPrefix={o => o?.value?.includes("equicord") ? <EquicordIcon /> : <VencordIcon />}
-            />
+            <div className={Margins.bottom8}>
+                <SearchableSelect
+                    options={cloudBackendOptions}
+                    value={cloudBackendOptions.find(o => o.value === cloud.url)?.value}
+                    onChange={v => changeUrl(v)}
+                    closeOnSelect={true}
+                    renderOptionPrefix={o => o?.value?.includes("equicord") ? <EquicordIcon /> : <VencordIcon />}
+                />
+            </div>
 
             <Flex gap="8px" alignItems="center">
                 <div style={{ flex: 1 }}>

src/equicordplugins/exitSounds/index.tsx

@@ -30,7 +30,7 @@ function GuildSelector() {
     return (
         <SearchableSelect
             options={options}
-            value={options.find(o => o.value === soundGuildId)}
+            value={options.find(o => o.value === soundGuildId)?.value}
             placeholder="Select a server..."
             maxVisibleItems={6}
             closeOnSelect={true}

src/equicordplugins/instantScreenshare/utils.tsx

@@ -105,7 +105,7 @@ function StreamSimplePicker({ streamMediaSelection, streamMedia }: PickerProps)
             placeholder="Select a media source to stream "
             maxVisibleItems={5}
             options={options}
-            value={options.find(o => o.value === streamMedia)}
+            value={options.find(o => o.value === streamMedia)?.value}
             onChange={v => settings.store.streamMedia = v}
             closeOnSelect
         />

src/equicordplugins/timezones/TimezoneModal.tsx

@@ -56,7 +56,7 @@ export function SetTimezoneModal({ userId, modalProps, database }: { userId: str
 
                     <SearchableSelect
                         options={options}
-                        value={options.find(o => o.value === currentValue)}
+                        value={options.find(o => o.value === currentValue)?.value}
                         placeholder={"Select a Timezone"}
                         maxVisibleItems={5}
                         closeOnSelect={true}

src/equicordplugins/vcNarratorCustom/index.tsx

@@ -794,7 +794,7 @@ function VoiceSelectModal({ modalProps, user }: { modalProps: ModalProps; user:
                     <HeadingSecondary>Select voice for {user.username}</HeadingSecondary>
                     <SearchableSelect
                         options={options}
-                        value={options.find(o => o.value === currentValue)}
+                        value={options.find(o => o.value === currentValue)?.value}
                         placeholder="Select a voice"
                         maxVisibleItems={6}
                         closeOnSelect={true}

src/equicordplugins/voiceMessageTranscriber.desktop/index.tsx

@@ -132,7 +132,7 @@ function LanguageSelectionModal(props: { modalProps: ModalProps, src: string; })
                         </BaseText>
                         <SearchableSelect
                             options={languageOptions}
-                            value={languageOptions.find(o => o.value === language)}
+                            value={languageOptions.find(o => o.value === language)?.value}
                             onChange={setLanguage}
                         />
                     </div>