Enhancement: Added enableToggle prop to Close picker on Click. #191

Author: Shrey Dhyani

apps/storybook/src/stories/molecules/PickerSelectMultiple.stories.tsx

@@ -1,11 +1,9 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { PickerSelectSimple } from '@reusejs/react';
-// import { CheckIcon, XIcon } from '@heroicons/react/solid';
-// import { TextInputBase } from '@reusejs/react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import React from 'react';
 
 const fetchContinents = (q = '') => {
-  let continents = [
+  const continents = [
     'Africa',
     'Antarctica',
     'Asia',

apps/storybook/src/stories/molecules/PickerSelectSingle.stories.tsx

@@ -1,11 +1,9 @@
+import { LabelBase, PickerSelectSimple } from '@reusejs/react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
 import React, { useState } from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { PickerSelectSimple, LabelBase } from '@reusejs/react';
-// import { CheckIcon, XIcon } from '@heroicons/react/solid';
-// import { TextInputBase } from '@reusejs/react';
 
 const fetchContinents = (q = '') => {
-  let continents = [
+  const continents = [
     'Africa',
     'Antarctica',
     'Asia',
@@ -127,6 +125,23 @@ DisableSearch.args = {
   },
 };
 
+export const ToggledDisableSearch = Template.bind({});
+ToggledDisableSearch.args = {
+  labelBaseProps: {
+    label: 'Country',
+    labelBaseClasses: {
+      color: 'text-yellow-800 dark:text-yellow-100',
+    },
+  },
+  valueKey: 'value',
+  multiple: false,
+  enableSearch: false,
+  dataSource: (q: any) => {
+    return fetchContinents(q);
+  },
+  enableToggle: true,
+};
+
 export const Selected = Template.bind({});
 Selected.args = {
   labelBaseProps: {

packages/react/src/molecules/pickers/select/base.tsx

@@ -49,6 +49,7 @@ export interface PickerSelectBaseProps {
   clearComponent?: any;
   noDataComponent?: any;
   customRightComponent?: React.FC;
+  enableToggle?: boolean;
 }
 
 const PickerSelectBase = React.forwardRef(
@@ -153,7 +154,13 @@ const PickerSelectBase = React.forwardRef(
           )}
 
           {open === true && (
-            <div className="relative" ref={visRef}>
+            <div
+              className="relative"
+              ref={visRef}
+              onClick={() => {
+                props.enableToggle && setOpen(false);
+              }}
+            >
               {props.searchRenderer && (
                 <props.searchRenderer
                   variant={props.variant}

packages/react/src/molecules/pickers/select/simple.tsx

@@ -10,6 +10,7 @@ export interface PickerSelectSimpleProps extends PickerSelectBaseProps {
   enableClear: boolean;
   enableClose: boolean;
   enableSearch: boolean;
+  enableToggle?: boolean;
 }
 
 const PickerSelectSimple = (props: PickerSelectSimpleProps) => {
@@ -47,6 +48,7 @@ const PickerSelectSimple = (props: PickerSelectSimpleProps) => {
       refresh={props.refresh}
       error={props.error}
       customRightComponent={props.customRightComponent}
+      enableToggle={props.enableToggle}
     />
   );
 };
@@ -319,4 +321,8 @@ const OptionsRenderer = ({
   );
 };
 
+PickerSelectSimple.defaultProps = {
+  enableToggle: false,
+};
+
 export default PickerSelectSimple;