diff --git a/src/components/InternationalPhoneCodeSelect.tsx b/src/components/InternationalPhoneCodeSelect.tsx index bdfe2e0152..3a20108452 100644 --- a/src/components/InternationalPhoneCodeSelect.tsx +++ b/src/components/InternationalPhoneCodeSelect.tsx @@ -51,10 +51,14 @@ export function InternationalPhoneCodeSelect({ ) }, [i18n, defaultCountry]) + const selected = useMemo(() => { + return items.find(item => item.value === value) + }, [value, items]) + return ( - + {selected => ( <> @@ -80,7 +84,7 @@ export function InternationalPhoneCodeSelect({ {item.code} - {item.value === location?.countryCode && } + {item.value === defaultCountry && } )} /> diff --git a/src/components/Select/index.web.tsx b/src/components/Select/index.web.tsx index f4146706f6..23a0279914 100644 --- a/src/components/Select/index.web.tsx +++ b/src/components/Select/index.web.tsx @@ -122,10 +122,21 @@ export function Trigger({children, label}: TriggerProps) { } } -export function ValueText({children: _, style, ...props}: ValueProps) { +export function ValueText({ + children, + webOverrideValue, + style, + ...props +}: ValueProps) { + let content + + if (webOverrideValue && children) { + content = children(webOverrideValue) + } + return ( - + {content} ) } diff --git a/src/components/Select/types.ts b/src/components/Select/types.ts index 5526f947d1..b1288caceb 100644 --- a/src/components/Select/types.ts +++ b/src/components/Select/types.ts @@ -126,6 +126,13 @@ export type ValueProps = { children?: (value: any) => React.ReactNode placeholder?: string style?: StyleProp + /** + * By default, web just extracts the component from inside the dropdown and portals it in here. + * If you want to override this, pass a value that will then be rendered via `children(value)` + * + * @platform web + */ + webOverrideValue?: any } /*