The React Dropdown and Multiselect components are difficult to use in a <Form> because they return an object instead of the value that would be part of a form.
Maybe there is already a way to handle it, but the docs for the MultiSelect do not include any way to map the value Object to just the primitive, and the Form docs have no example with a MultiSelect.
In my experience, when loading and saving data to/from an API, they very rarely take objects with an ID and Text properties. They usually expect just the primitive values (IDs) of the selected items. The Angular MultiSelect control has a `valuePrimitive` attribute that can be used to control this behavior. The React version does not seem to support this use case at all, or it is hard to find in the docs if it does exist.
Example code: https://stackblitz.com/edit/react-xroafa?file=app/main.jsx
Essentially, it would have been nice if you could do:
<MultiSelect
data={[
{ id: 1, text: 'One' },
{ id: 2, text: 'Two' },
]}
value={[2]} // just a primitive value, not an object
onChange={(value) => /* value should just be the `id`s not the objects */ }
/>
Which would enable MultiSelect to be usable in a <Form>. Since the <Field> component does not allow overriding the `value` or `onChange` events, mapping these primitives to object form is frustrating and a bunch of extra code.
In the Angular version this is easily achievable, with an example in the docs: https://www.telerik.com/kendo-angular-ui/components/dropdowns/multiselect/value-binding/#toc-primitive-values-from-object-fields