@campxdev/react-blueprint 1.3.1 → 1.3.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/react-blueprint",
-  "version": "1.3.1",
+  "version": "1.3.3",
   "main": "./export.ts",
   "private": false,
   "dependencies": {

package/src/components/Input/SingleSelect/SingleSelect.tsx

@@ -103,7 +103,11 @@ const singleSelectReducer = (
       return { ...state, open: true };
     }
     case SingleSelectActionsTypes.CLOSE: {
-      return { ...state, open: false, loadingInternalOptions: false };
+      return {
+        ...state,
+        open: false,
+        loadingInternalOptions: false,
+      };
     }
     case SingleSelectActionsTypes.LOAD_INTERNAL_OPTIONS_START: {
       return { ...state, loadingInternalOptions: true };
@@ -121,15 +125,19 @@ const singleSelectReducer = (
       return { ...state, ...stateChanges };
     }
     case SingleSelectActionsTypes.SET_SEARCH: {
-      return { ...state, search: stateChanges.search, hasMore: true };
+      return {
+        ...state,
+        search: stateChanges.search,
+        hasMore: true,
+      };
     }
     case SingleSelectActionsTypes.CLEAR_SEARCH: {
       return {
         ...state,
         search: null,
         offset: 0,
-        internalOptions: [],
-        internalOptionsMap: {},
+        internalOptions: stateChanges.internalOptions,
+        internalOptionsMap: stateChanges.internalOptionsMap,
       };
     }
     case SingleSelectActionsTypes.SET_INTERNAL_OPTIONS: {
@@ -228,10 +236,10 @@ export const SingleSelect = ({
             params: {
               limit,
               offset,
-              selectedValueData: value,
               dbValueProps: {
                 ...dbValueProps,
                 ...(dbValueProps.isObjectId && { isObjectId: true }),
+                selectedValueData: value,
               },
               dbLabelProps,
               ...optionsApiEndpointParams,
@@ -285,6 +293,16 @@ export const SingleSelect = ({
     if (optionsApiEndPoint) {
       dispatch({
         actionType: SingleSelectActionsTypes.CLEAR_SEARCH,
+        stateChanges: {
+          internalOptions: internalOptions.filter((o: any) =>
+            reason != 'selectOption' ? o.value == value : o.value != value,
+          ),
+          internalOptionsMap: generateOptionsMap(
+            internalOptions.filter((o: any) =>
+              reason != 'selectOption' ? o.value == value : o.value != value,
+            ),
+          ),
+        },
       });
     }
     if (onClose) {
@@ -308,13 +326,16 @@ export const SingleSelect = ({
           params: {
             limit: limit,
             offset: offset + 10,
-            search: search,
-            selectedValueData: value,
+
             dbValueProps: {
               ...dbValueProps,
               ...(dbValueProps.isObjectId && { isObjectId: true }),
+              selectedValueData: value,
+            },
+            dbLabelProps: {
+              search: search,
+              ...dbLabelProps,
             },
-            dbLabelProps,
             ...optionsApiEndpointParams,
           },
         })
@@ -345,6 +366,12 @@ export const SingleSelect = ({
     if (!searchValue || searchValue.trim() === '') {
       dispatch({
         actionType: SingleSelectActionsTypes.CLEAR_SEARCH,
+        stateChanges: {
+          internalOptions: internalOptions.filter((o: any) => o.value == value),
+          internalOptionsMap: generateOptionsMap(
+            internalOptions.filter((o: any) => o.value == value),
+          ),
+        },
       });
     }
     if (optionsApiEndPoint) {
@@ -357,13 +384,15 @@ export const SingleSelect = ({
             params: {
               limit,
               offset: 0,
-              selectedValueData: value,
               dbValueProps: {
                 ...dbValueProps,
                 ...(dbValueProps.isObjectId && { isObjectId: true }),
+                selectedValueData: value,
+              },
+              dbLabelProps: {
+                search: searchValue,
+                ...dbLabelProps,
               },
-              dbLabelProps,
-              search: searchValue,
               ...optionsApiEndpointParams,
             },
           })
@@ -373,8 +402,14 @@ export const SingleSelect = ({
         dispatch({
           actionType: SingleSelectActionsTypes.SET_INTERNAL_OPTIONS,
           stateChanges: {
-            internalOptions: options,
-            internalOptionsMap: generateOptionsMap(options),
+            internalOptions: [
+              ...options,
+              ...internalOptions.filter((o: any) => o.value == value),
+            ],
+            internalOptionsMap: generateOptionsMap([
+              ...options,
+              ...internalOptions.filter((o: any) => o.value == value),
+            ]),
           },
         });
       } catch (e) {
@@ -397,11 +432,11 @@ export const SingleSelect = ({
     }, 300);
   }, [searchDb]);
 
-  const handleSearch = async (
-    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
-  ) => {
-    const searchValue = e.target.value;
-    debouncedSendRequest(searchValue);
+  const handleSearch = async (e: any) => {
+    if (e) {
+      const searchValue = e.target.value;
+      debouncedSendRequest(searchValue);
+    }
   };
 
   const loadSelectedOptions = async () => {
@@ -413,13 +448,13 @@ export const SingleSelect = ({
         params: {
           limit,
           offset,
-          selectedValueData: value,
           dbValueProps: {
             ...dbValueProps,
             ...(dbValueProps.isObjectId && { isObjectId: true }),
+            selectedValueData: value,
+            filterBySelectedValues: true,
           },
           dbLabelProps,
-          filterBySelectedValues: true,
         },
       });
       dispatch({
@@ -468,6 +503,7 @@ export const SingleSelect = ({
       onChange={(e, value) => {
         onChange(getValue ? getValue(value) : value?.value);
       }}
+      onInputCapture={handleSearch}
       open={open}
       autoFocus={true}
       filterOptions={(options, state) => {
@@ -511,7 +547,6 @@ export const SingleSelect = ({
           label={label}
           required={required}
           name={name}
-          onChange={handleSearch}
           error={error}
           helperText={helperText}
         />