Web and Native discrepancies

[ianmartorell]

Why is it that Select's onValueChange behaves differently in web and native? I see that Radix only passes the value to the callback function but it's a bit confusing that the value gets passed as the label as well to onValueChange. There's no mention of it in the documentation either, I thought it was a bug.

rn-primitives/packages/select/src/select.web.tsx

Lines 35 to 38 in 5a5f215

	/**
	* @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' }
	*/

Would you consider unifying the API by either finding the label in the web version to pass it to the callback, or changing the API of the native primitive?

Is having parity between platforms a goal of this project?

Thank you!

[kilbot]

I agree with this, it seems an unnecessary complication.

[mattddean]

I think this can be addressed by matching the Radix API. Radix is the standard. Whether or not it's more convenient to receive the entire option back, anyone who is trying to migrate from Radix will have an easier time if the API exactly matches. onValueChange's signature ought to be (value: string) => void and value ought to be a string IMO.

[mattddean]

@mrzachnugent i would love to submit a PR to do this with your blessing

[mrzachnugent]

@ianmartorell PR are more than welcome!

If I remember correctly, this added complexity is to allow the native and web components to have as much freedom. I think the main issue was with getting the child of Select.ItemText to show in the Select.Value component on native.

If you could unify the API while maintaining the flexibility of having something like the following snippet, that would be awesome.

const SelectItem = React.forwardRef(({ children, className, ...props }, forwardedRef) => {
  return (
    <Select.Item className={classnames('SelectItem', className)} {...props} ref={forwardedRef}>
      <Select.ItemText>{children}</Select.ItemText>
      <Select.ItemIndicator className="SelectItemIndicator">
        <CheckIcon />
      </Select.ItemIndicator>
    </Select.Item>
  );
});

The flexibility comes from being able to add more than just text in the Select.Item in a composable manner.