[Select] onValueChange vs onChange

[veloware]

I notice when working with Ark and Zag for the likes of the Select component, it seems to be on an onValueChange vs onChange prop?

Im curious why the change of naming, given onChange is a standard prop name in React and works with the likes of 3rd party form libs like react-hook-form etc.

Second question is around the args of onValueChange, it looks like it receives an object with both items and value -

When would you use items over value and vice-versa? In particular I notice that items is an array of Proxy values?

[cschroeter]

@veloware
For this usecase we export a <Select.HiddenSelect /> that should make integration a breeze with form libraries.

<Select.HiddenSelect {...register('framework')} />

You can find the full example here: https://github.com/chakra-ui/ark/blob/main/packages/react/src/components/select/examples/form-library.tsx

[veloware]

@cschroeter thanks for the reply

this wouldn't work for a select with 'multiple' prop though, right? As -

<select multiple onChange={}>

onChange here doesn't return an array of values, it just returns a single value (of the last element chosen I presume?) So I would need to use the onValueChange callback in this case?

And from looking at the example, how could you wrap up the Ark Select components into the likes of a MultiSelect component and provide props to the Select.Root AND and hidden select, if the hidden select only needs to get used in the context of a form-library, but in other cases, the props are attached to the root?

const MultiSelect = (props) => (
   <Select.Root {...props}>
      ...
      <Select.HiddenSelect {...props}/> <!-- props here too?
)

Thanks

[cschroeter]

@veloware

Multiple selection works fine using <Select.Root multiple /> (see video).

Regarding the API design, you have several options:

Option A

Integrate the form library directly into your component.

Option B

Split the relevant props between the root and the hidden select.

const { name, onChange, onBlur, ref, ...rootProps } = props;
return (
  <Select.Root {...rootProps} name={name} onChange={onChange} onBlur={onBlur}>
    <Select.HiddenSelect ref={ref} name={name} onChange={onChange} onBlur={onBlur} />
  </Select.Root>
);

Option C

Allow direct access to the hidden select.

const App = () => {
  return <MySelect hiddenSelectProps={register("framework")} />;
};

Screen.Recording.2024-07-26.at.13.44.01.mov

[veloware]

ok thank you, I will have a look at those options, B is looking likely, much appreciated!