Adding Option To Allow Pushing Selected Items To The Top of Items

README.md

@@ -142,6 +142,9 @@ yarn add react-native-element-dropdown
 | itemTestIDField    | String                                               | No        | Add this field to the input data. Ex: DATA = [{itemTestIDField: '', label: '', value:: ''}]|
 | accessibilityLabel | String          | No    | Set an accessibilityLabel on the view, so that people who use VoiceOver know what element they have selected |
 | itemAccessibilityLabelField | String                                      | No        | Add this field to the input data. Ex: DATA = [{itemAccessibilityLabelField: '', label: '', value:: ''}]|
+|------|------|------|------|
+| selectedToTop      | Boolean                                              | No        | Put selected items on top of the list                                                                  |
+|------|------|------|------|
 
 
 

src/components/MultiSelect/index.tsx

@@ -93,6 +93,7 @@ const MultiSelectComponent: <T>(
       itemAccessibilityLabelField,
       visibleSelectedItem = true,
       mode = 'default',
+      selectedToTop = false,
     } = props;
 
     const ref = useRef<View>(null);
@@ -519,7 +520,13 @@ const MultiSelectComponent: <T>(
               accessibilityLabel={accessibilityLabel + ' flatlist'}
               {...flatListProps}
               keyboardShouldPersistTaps="handled"
-              data={listData}
+              data={
+                selectedToTop
+                  ? listData
+                      .filter((item) => checkSelected(item))
+                      .concat(listData.filter((item) => !checkSelected(item)))
+                  : listData
+              }
               inverted={isTopPosition ? inverted : false}
               renderItem={_renderItem}
               keyExtractor={(_item, index) => index.toString()}

src/components/MultiSelect/model.ts

@@ -35,6 +35,7 @@ export interface MultiSelectProps<T> {
   iconColor?: string;
   activeColor?: string;
   data: T[];
+  selectedToTop?: boolean;
   value?: string[] | null | undefined;
   placeholder?: string;
   labelField: keyof T;