refine icon indicating copy to clipboard operation
refine copied to clipboard

[FEAT]: Have ability to sort `selectedOptions` first in `useSelect`

Open Dominic-Preap opened this issue 1 year ago • 2 comments

Is your feature request related to a problem? Please describe.

Currently we use useSelect with defaultValue to add extra options in our select list. But when options have more records like 30-50 records so the selectedOptions is at the bottom.

We want selectedOptions at first position of the list.

useSelect({
  defaultValue: 1, // or [1, 2]
});

Describe alternatives you've considered

First option, we can switch the order of selectedOptions first then options. image

Second option, have a property to sort by selectedOptions or options first.

useSelect({
  defaultValue: 1, 
 selectedOptionsSort: 'asc' | 'desc'  // <--- something like that, we can have better name than this.
});

Additional context

At the bove.

Describe the thing to improve

N/A

Dominic-Preap avatar Jun 20 '24 12:06 Dominic-Preap

Hey @Dominic-Preap thank you for the issue! I think this makes sense and can benefit many use-cases. 🚀 We've discussed on how we can implement those changes and decided like below:

type SelectedOptionsOrder = "in-place" | "selected-first";

type UseSelectProps<...> = {
  /* ... */
  selectedOptionsOrder?: SelectedOptionsOrder; // This will be default to "in-place" which is. the current behavior.
}

Then use the selectedOptionsOrder to determine the order in the line 365:

https://github.com/refinedev/refine/blob/90930b381d8d369c63bc59beedf69c391875166d/packages/core/src/hooks/useSelect/index.ts#L365

Default value should be "in-place" in order to keep the current behavior as default.

There are also extensions of the useSelect hook such as useSelect from @refinedev/antd which may require small changes but I guess those won't take much time or might not require any change at all.

Do you want to work on this issue? We'd love to see your contribution 🙏 Check out our Contributing Guide to learn how to get started 🚀 🚀

Let us know if you can work on this and please let us know if you have any issues while working on it 💯

aliemir avatar Jun 21 '24 08:06 aliemir

Okay sure, you can assign to me. I'll work on it this weekend.

Dominic-Preap avatar Jun 21 '24 09:06 Dominic-Preap