useSelect hook on Edit Page

[heriparid]

Hi Team,
I need a guidance on how to populate multiple Select (using ant design) in Edit Page.
The use case is that I want to Edit particular User which having multiple Roles (one to many relations).

But I have no luck, the multiple select showing not as expected. It just showing blank label-value
Here's my snipet code

export const UserEdit = () => {
  const { selectProps: roleSelectProps } = useSelect<IRole>({
    resource: 'roles',
    optionLabel: 'name',
    optionValue: 'id',
    sort: [{ field: 'name', order: 'asc' }],
    debounce: 500,
    onSearch: (value) => [
      {
        field: 'name',
        operator: 'contains',
        value,
      },
    ],
  });

  const { formProps, saveButtonProps } = useForm<IUser>();
  return (
    <Edit saveButtonProps={saveButtonProps}>
      <Form {...formProps} layout="vertical">
        <Form.Item
          label="Username"
          name="username"
          rules={[{ required: true }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="First Name"
          name="firstName"
          rules={[{ required: true }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="Last Name"
          name="lastName"
          rules={[{ required: true }]}
        >
          <Input />
        </Form.Item>

        <Form.Item label="Roles" name="roles" rules={[{ required: true }]}>
          <Select
            {...roleSelectProps}
            allowClear
            mode="multiple"
            placeholder="Select Roles"
          />
        </Form.Item>
      </Form>
    </Edit>
  );
};

IRole interface declare as follows:

export interface IRole {
  id: number;
  name: string;
  active: boolean;
}

Could you please tell me what I'm missing.
Thanks.

Here's the page looks like (not as expected).

[omeraplak]

Hey @heriparid 👋,
Thank you for contacting us. We have an example like this. I hope will be useful to you 🚀

Live: https://refine.dev/docs/examples/data-provider/nestjsxCrud/

Source: https://github.com/pankod/refine/blob/next/examples/dataProvider/nestjsxCrud/src/pages/posts/edit.tsx#L76

[heriparid]

Hi @omeraplak ,
Thanks for pointing me out to this tutorial. Especially for your fast response.
It's now working perfectly.

So the keyword is that:

1. Get query result by using useForm hook
2. Assign default value within useSelect Props
3. Render value mapping at getValueProps in component if exists. Cheers

[Kkkassini]

HI @omeraplak , I see that the example uses Ant Design, would it be possible to create the same select with multiple tags supported with Chakra UI?

[omeraplak]

Hey @Kkkassini -- Unfortunately. Does the select component of Chakra-UI support multiple selections? https://chakra-ui.com/docs/components/select/usage