ktmud commented on a change in pull request #18856:
URL: https://github.com/apache/superset/pull/18856#discussion_r819699142
##########
File path: superset-frontend/src/components/Select/Select.tsx
##########
@@ -315,81 +324,44 @@ const Select = ({
: allowNewOptions
? 'tags'
: 'multiple';
- const allowFetch = !fetchOnlyOnSearch || searchedValue;
-
- // TODO: Don't assume that isAsync is always labelInValue
- const handleTopOptions = useCallback(
- (selectedValue: AntdSelectValue | undefined) => {
- // bringing selected options to the top of the list
- if (selectedValue !== undefined && selectedValue !== null) {
- const isLabeledValue = isAsync || labelInValue;
- const topOptions: OptionsType = [];
- const otherOptions: OptionsType = [];
-
- selectOptions.forEach(opt => {
- let found = false;
- if (Array.isArray(selectedValue)) {
- if (isLabeledValue) {
- found =
- (selectedValue as AntdLabeledValue[]).find(
- element => element.value === opt.value,
- ) !== undefined;
- } else {
- found = selectedValue.includes(opt.value);
- }
- } else {
- found = isLabeledValue
- ? (selectedValue as AntdLabeledValue).value === opt.value
- : selectedValue === opt.value;
- }
-
- if (found) {
- topOptions.push(opt);
- } else {
- otherOptions.push(opt);
- }
- });
-
- // fallback for custom options in tags mode as they
- // do not appear in the selectOptions state
- if (!isSingleMode && Array.isArray(selectedValue)) {
- selectedValue.forEach((val: string | number | AntdLabeledValue) => {
- if (
- !topOptions.find(
- tOpt =>
- tOpt.value ===
- (isLabeledValue ? (val as AntdLabeledValue)?.value : val),
- )
- ) {
- if (isLabeledValue) {
- const labelValue = val as AntdLabeledValue;
- topOptions.push({
- label: labelValue.label,
- value: labelValue.value,
- });
- } else {
- const value = val as string | number;
- topOptions.push({ label: String(value), value });
- }
- }
- });
- }
- const sortedOptions = [
- ...topOptions.sort(sortComparator),
- ...otherOptions.sort(sortComparator),
- ];
- if (!isEqual(sortedOptions, selectOptions)) {
- setSelectOptions(sortedOptions);
- }
- } else {
- const sortedOptions = [...selectOptions].sort(sortComparator);
- if (!isEqual(sortedOptions, selectOptions)) {
- setSelectOptions(sortedOptions);
- }
- }
- },
- [isAsync, isSingleMode, labelInValue, selectOptions, sortComparator],
+ const allowFetch = !fetchOnlyOnSearch || inputValue;
+
+ const sortSelectedFirst = useCallback(
+ (a: AntdLabeledValue, b: AntdLabeledValue) =>
+ selectValue && a.value !== undefined && b.value !== undefined
+ ? Number(hasOption(b.value, selectValue)) -
+ Number(hasOption(a.value, selectValue))
+ : 0,
+ [selectValue],
+ );
+ const sortComparatorWithSearch = useCallback(
+ (a: AntdLabeledValue, b: AntdLabeledValue) =>
+ sortSelectedFirst(a, b) || sortComparator(a, b, inputValue),
+ [inputValue, sortComparator, sortSelectedFirst],
);
+ const sortComparatorWithoutSearch = useCallback(
+ (a: AntdLabeledValue, b: AntdLabeledValue) =>
+ sortSelectedFirst(a, b) || sortComparator(a, b, ''),
+ [sortComparator, sortSelectedFirst],
+ );
+ const [selectOptions_, setSelectOptions] =
Review comment:
Updating the state will cause an additional rendering plus I didn't want
to append the missing select values every time selectOptions is updated. I can
rename the variable to reduce confusion.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
