minSelectableItems to allow for fine control over de-selections

[xenvi]

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch [email protected] for the project I'm working on.

The problem: The useSelectionHandler did not let me define a minimum required selection. In my case, i needed to require 1 selected item, but disallow de-selecting the item if the same item is selected again. I added a minSelectableItems num prop which can be utilized on both single and multi select (for single select, just setting minSelectableItems={1} fixed my issue for me)

Here is the diff that solved my problem:

diff --git a/node_modules/react-native-input-select/src/.DS_Store b/node_modules/react-native-input-select/src/.DS_Store
new file mode 100644
index 0000000..76d6496
Binary files /dev/null and b/node_modules/react-native-input-select/src/.DS_Store differ
diff --git a/node_modules/react-native-input-select/src/hooks/use-selection-handler.ts b/node_modules/react-native-input-select/src/hooks/use-selection-handler.ts
index 89d22fb..6f296d8 100644
--- a/node_modules/react-native-input-select/src/hooks/use-selection-handler.ts
+++ b/node_modules/react-native-input-select/src/hooks/use-selection-handler.ts
@@ -5,6 +5,7 @@ interface UseSelectionHandlerProps {
   initialSelectedValue: TSelectedItem | TSelectedItem[]; // Can be a single value or an array
   isMultiple: boolean;
   maxSelectableItems?: number;
+  minSelectableItems?: number;
   onValueChange: (selectedItems: TSelectedItem | TSelectedItem[]) => void;
   closeModal: () => void;
   autoCloseOnSelect: boolean;
@@ -14,6 +15,7 @@ export const useSelectionHandler = ({
   initialSelectedValue,
   isMultiple,
   maxSelectableItems,
+  minSelectableItems = 0,
   onValueChange,
   closeModal,
   autoCloseOnSelect,
@@ -29,8 +31,11 @@ export const useSelectionHandler = ({
   const handleSingleSelection = useCallback(
     (value: TSelectedItem) => {
       if (selectedItem === value) {
-        setSelectedItem('');
-        onValueChange(''); // Send null to parent when deselected
+        // Deselect item if minSelectableItems is not reached
+        if (minSelectableItems === 0) {
+          setSelectedItem('');
+          onValueChange(''); // Send null to parent when deselected
+        }
       } else {
         setSelectedItem(value);
         onValueChange(value); // Send selected value to parent
@@ -49,8 +54,10 @@ export const useSelectionHandler = ({
         let selectedValues = [...prevVal];
 
         if (selectedValues.includes(value)) {
-          // Remove item
-          selectedValues = selectedValues.filter((item) => item !== value);
+          // Only remove item if it doesn't drop below the minimum required
+          if (selectedValues.length > minSelectableItems) {
+            selectedValues = selectedValues.filter((item) => item !== value);
+          }
         } else {
           // Add item
           if (
diff --git a/node_modules/react-native-input-select/src/index.tsx b/node_modules/react-native-input-select/src/index.tsx
index 9751c88..fef7fd2 100644
--- a/node_modules/react-native-input-select/src/index.tsx
+++ b/node_modules/react-native-input-select/src/index.tsx
@@ -65,6 +65,7 @@ export const DropdownSelect = forwardRef<DropdownSelectHandle, DropdownProps>(
       checkboxControls,
       autoCloseOnSelect = true,
       maxSelectableItems,
+      minSelectableItems,
       ...rest
     },
     ref
@@ -139,6 +140,7 @@ export const DropdownSelect = forwardRef<DropdownSelectHandle, DropdownProps>(
       initialSelectedValue: selectedValue,
       isMultiple,
       maxSelectableItems,
+      minSelectableItems,
       onValueChange,
       closeModal: () => closeModal(),
       autoCloseOnSelect,
diff --git a/node_modules/react-native-input-select/src/types/index.types.ts b/node_modules/react-native-input-select/src/types/index.types.ts
index bebbebe..b8ea025 100644
--- a/node_modules/react-native-input-select/src/types/index.types.ts
+++ b/node_modules/react-native-input-select/src/types/index.types.ts
@@ -22,6 +22,7 @@ export type CommonDropdownProps = {
   selectedValue: TSelectedItem | TSelectedItem[];
   autoCloseOnSelect?: boolean;
   maxSelectableItems?: number;
+  minSelectableItems?: number;
 };
 
 export type TDropdownInputProps = {

This issue body was partially generated by patch-package.

[azeezat]

Thanks for fixing this. Feel free to submit a pull request and I will merge it ASAP. If you are new to contributing to open source, here is a quick guide on how to get started .