refine
refine copied to clipboard
[FEAT]: Have ability to sort `selectedOptions` first in `useSelect`
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.
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
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 💯
Okay sure, you can assign to me. I'll work on it this weekend.