get web closed state working

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 (
     <Select.Root value={value} onValueChange={onChange}>
       <Select.Trigger label={_(msg`Select telephone code`)}>
-        <Select.ValueText placeholder="+...">
+        <Select.ValueText placeholder="+..." webOverrideValue={selected}>
           {selected => (
             <>
               <Flag {...selected} />
@@ -80,7 +84,7 @@ export function InternationalPhoneCodeSelect({
                 {item.code}
               </Select.ItemText>
             </Select.Item>
-            {item.value === location?.countryCode && <Select.Separator />}
+            {item.value === defaultCountry && <Select.Separator />}
           </Fragment>
         )}
       />

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 (
     <Text style={style}>
-      <RadixSelect.Value {...props} />
+      <RadixSelect.Value {...props}>{content}</RadixSelect.Value>
     </Text>
   )
 }

src/components/Select/types.ts

@@ -126,6 +126,13 @@ export type ValueProps = {
   children?: (value: any) => React.ReactNode
   placeholder?: string
   style?: StyleProp<TextStyle>
+  /**
+   * 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
 }
 
 /*