diff --git a/packages/select/src/select.web.tsx b/packages/select/src/select.web.tsx index 62d03fc1..5e79d417 100644 --- a/packages/select/src/select.web.tsx +++ b/packages/select/src/select.web.tsx @@ -41,14 +41,11 @@ const SelectContext = React.createContext< | (SharedRootContext & { open: boolean; onOpenChange: (open: boolean) => void; + labelForValueRef: React.MutableRefObject>; }) | null >(null); -/** - * @web Parameter of `onValueChange` has the value of `value` for the `value` and the `label` of the selected Option - * @ex When an Option with a label of Green Apple, the parameter passed to `onValueChange` is { value: 'green-apple', label: 'green-apple' } - */ const Root = React.forwardRef( ( { @@ -73,8 +70,12 @@ const Root = React.forwardRef( onOpenChangeProp?.(value); } + const labelForValueRef = React.useRef>({}); function onStrValueChange(val: string) { - onValueChange({ value: val, label: val }); + onValueChange({ + value: val, + label: labelForValueRef.current[val] ?? val, + }); } const Component = asChild ? Slot.View : View; @@ -85,6 +86,7 @@ const Root = React.forwardRef( onValueChange, open, onOpenChange, + labelForValueRef, }} > ( ({ asChild, closeOnPress = true, label, value, children, ...props }, ref) => { + const { labelForValueRef } = useRootContext(); + if (!(value in labelForValueRef.current)) { + labelForValueRef.current[value] = label; + } return ( - + <>{children as React.ReactNode}