refinedev / refine

A React Framework for building internal tools, admin panels, dashboards & B2B apps with unmatched flexibility.
https://refine.dev
MIT License
25.92k stars 1.96k forks source link

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

Open Dominic-Preap opened 1 week ago

Dominic-Preap commented 1 week ago

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

aliemir commented 1 week ago

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 💯

Dominic-Preap commented 1 week ago

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