fix: allow empty options

README.md

@@ -305,8 +305,9 @@ searchControls={
     minHeight: 10,
     paddingVertical: 10,
     paddingHorizontal: 5,
-    width: '50%',
+    width: '70%',
     textAlign: 'center',
+    backgroundColor: 'pink',
   },
   textInputContainerStyle: {
     flex: 1,
@@ -315,7 +316,7 @@ searchControls={
   },
   textInputProps: {
     placeholder: 'Search anything here',
-    placeholderTextColor: 'gray',
+    placeholderTextColor: 'white',
   },
 }
 ```

example/ios/InputSelectExample.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>IDEDidComputeMac32BitWarning</key>
+	<true/>
+</dict>
+</plist>

example/src/App.tsx

@@ -98,8 +98,9 @@ export default function App() {
                 minHeight: 10,
                 paddingVertical: 10,
                 paddingHorizontal: 5,
-                width: '50%',
+                width: '70%',
                 textAlign: 'center',
+                backgroundColor: 'pink',
               },
               textInputContainerStyle: {
                 flex: 1,
@@ -108,7 +109,7 @@ export default function App() {
               },
               textInputProps: {
                 placeholder: 'Search anything here',
-                placeholderTextColor: 'gray',
+                placeholderTextColor: 'white',
               },
             }}
           />

src/components/CheckBox/index.tsx

@@ -83,7 +83,7 @@ const CheckBox = ({
           />
         )}
       </View>
-      {label && (
+      {label && label !== '' && (
         <Text
           style={[
             checkboxComponentStyles?.checkboxLabelStyle || checkboxLabelStyle,

src/components/Dropdown/DropdownFlatList.tsx

@@ -35,8 +35,10 @@ const DropdownFlatList = ({
   };
 
   useEffect(() => {
-    scrollToItem(listIndex.itemIndex);
-  }, [listIndex]);
+    if (options?.length) {
+      scrollToItem(listIndex.itemIndex);
+    }
+  }, [listIndex, options]);
 
   return (
     <FlatList
@@ -71,7 +73,7 @@ const DropdownFlatList = ({
           checkboxStyle, // kept for backwards compatibility
           checkboxLabelStyle, // kept for backwards compatibility
           checkboxComponentStyles,
-          checkboxComponent
+          checkboxComponent,
         })
       }
       keyExtractor={(_item, index) => `Options${index}`}

src/components/Dropdown/DropdownSectionList.tsx

@@ -71,8 +71,10 @@ const DropdownSectionList = ({
   };
 
   useEffect(() => {
-    scrollToLocation(listIndex);
-  }, [listIndex]);
+    if (options?.length) {
+      scrollToLocation(listIndex);
+    }
+  }, [listIndex, options]);
 
   return (
     <SectionList
@@ -111,7 +113,8 @@ const DropdownSectionList = ({
         })
       }
       renderSectionHeader={({ section: { title, data } }) =>
-        data.length > 0 && (
+        data?.length &&
+        title && (
           <SectionHeaderTitle
             title={title}
             sectionHeaderStyle={listComponentStyles?.sectionHeaderStyle}

src/components/Input/index.tsx

@@ -9,7 +9,6 @@ export const Input = ({
   style,
   primaryColor,
   textInputContainerStyle,
-  openModal,
   ...rest
 }: any) => {
   const [isFocused, setFocus] = useState(false);
@@ -30,7 +29,6 @@ export const Input = ({
         ]}
         onFocus={() => {
           setFocus(true);
-          openModal();
         }}
         onBlur={() => setFocus(false)}
         value={value}

src/index.tsx

@@ -68,11 +68,7 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
   const [listIndex, setListIndex] = useState<{
     sectionIndex?: number;
     itemIndex: number;
-  }>({ itemIndex: 0 }); // for scrollToIndex in Sectionlist and Flatlist
-
-  if (!options || options.length === 0) {
-    throw new Error('Options array cannot be empty or undefined');
-  }
+  }>({ itemIndex: 0, sectionIndex: 0 }); // for scrollToIndex in Sectionlist and Flatlist
 
   useEffect(() => {
     setNewOptions(options);
@@ -92,7 +88,7 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
    *==========================================*/
 
   // check the structure of the new options array to determine if it is a section list or a
-  const isSectionList = newOptions.some(
+  const isSectionList = newOptions?.some(
     (item) => item.title && item.data && Array.isArray(item.data)
   );
 
@@ -102,17 +98,17 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
   const modifiedSectionData = extractPropertyFromArray(
     newOptions,
     'data'
-  ).flat();
+  )?.flat();
 
   /**
-   *`modifiedOptions` should only be used for computations newOptions remains the default array.
-   * At this point modifiedOptions now has the same structure for both `FlatList` and `SectionList`
+   * `options` is the original array, it never changes. (Do not use except you really need the original array) .
+   * `newOptions` is a copy of options but can be mutated by `setNewOptions`, as a result, the value many change.
+   * `modifiedOptions` should only be used for computations. It has the same structure for both `FlatList` and `SectionList`
    */
   const modifiedOptions = isSectionList ? modifiedSectionData : newOptions;
 
   const optLabel = optionLabel || DEFAULT_OPTION_LABEL;
   const optValue = optionValue || DEFAULT_OPTION_VALUE;
-  const optionsCopy = JSON.parse(JSON.stringify(options)); // copy of the original options array
 
   /*===========================================
    * Selection handlers
@@ -143,7 +139,7 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
   };
 
   const removeDisabledItems = (items: TFlatList) => {
-    return items.filter((item: TFlatListItem) => !item.disabled);
+    return items?.filter((item: TFlatListItem) => !item.disabled);
   };
 
   const handleSelectAll = () => {
@@ -153,8 +149,8 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
       // don't select disabled items
       const filteredOptions = removeDisabledItems(
         isSectionList
-          ? extractPropertyFromArray(optionsCopy, 'data').flat()
-          : optionsCopy
+          ? extractPropertyFromArray(options, 'data').flat()
+          : options
       );
 
       if (!prevVal) {
@@ -184,7 +180,7 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
     (selectedValues: any[]) => {
       //if the list contains disabled values, those values will not be selected
       if (
-        removeDisabledItems(modifiedOptions).length === selectedValues.length
+        removeDisabledItems(modifiedOptions)?.length === selectedValues?.length
       ) {
         setSelectAll(true);
       } else {
@@ -234,10 +230,10 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
 
     const regexFilter = new RegExp(searchText, 'i');
 
-    // Because the options array will be mutated after Search, we have to search with a copy of the original array
+    // Because the options array will be mutated while searching, we have to search with the original array
     const searchResults = isSectionList
-      ? searchSectionList(optionsCopy as TSectionList, regexFilter)
-      : searchFlatList(optionsCopy as TFlatList, regexFilter);
+      ? searchSectionList(options as TSectionList, regexFilter)
+      : searchFlatList(options as TFlatList, regexFilter);
 
     setNewOptions(searchResults);
   };
@@ -300,18 +296,22 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
    *==========================================*/
   const setIndexOfSelectedItem = (selectedLabel: string) => {
     isSectionList
-      ? optionsCopy.map((item: TSectionListItem, sectionIndex: number) => {
-          item.data?.find((dataItem: TFlatListItem, itemIndex: number) => {
-            if (dataItem[optLabel] === selectedLabel) {
-              setListIndex({ sectionIndex, itemIndex });
+      ? (options as TSectionListItem[] | undefined)?.map(
+          (item: TSectionListItem, sectionIndex: number) => {
+            item?.data?.find((dataItem: TFlatListItem, itemIndex: number) => {
+              if (dataItem[optLabel] === selectedLabel) {
+                setListIndex({ sectionIndex, itemIndex });
+              }
+            });
+          }
+        )
+      : (options as TFlatListItem[] | undefined)?.find(
+          (item: TFlatListItem, itemIndex: number) => {
+            if (item[optLabel] === selectedLabel) {
+              setListIndex({ itemIndex });
             }
-          });
-        })
-      : optionsCopy?.find((item: TFlatListItem, itemIndex: number) => {
-          if (item[optLabel] === selectedLabel) {
-            setListIndex({ itemIndex });
           }
-        });
+        );
   };
 
   return (
@@ -350,7 +350,6 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
         modalProps={modalProps}
       >
         <ListTypeComponent
-          removeClippedSubviews={false}
           ListHeaderComponent={
             <>
               {isSearchable && (
@@ -362,12 +361,14 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
                   textInputContainerStyle={
                     searchControls?.textInputContainerStyle
                   }
-                  openModal={() => setOpen(true)} // There seems to a known issue on expo web that closes the modal when the input is focused
+                  placeholder={
+                    searchControls?.textInputProps?.placeholder || 'Search'
+                  }
                   {...searchControls?.textInputProps}
                 />
               )}
               {listHeaderComponent}
-              {isMultiple && modifiedOptions.length > 1 && (
+              {isMultiple && modifiedOptions?.length > 1 && (
                 <View style={styles.optionsContainerStyle}>
                   <TouchableOpacity onPress={() => {}}>
                     <CheckBox

src/utils/index.ts

@@ -3,7 +3,7 @@
  */
 
 export const extractPropertyFromArray = (arr: any, property: string) => {
-  let extractedValue = arr.map((item: any) => item[property]);
+  let extractedValue = arr?.map((item: any) => item[property]);
 
   return extractedValue;
 };