disable flag for search feature and closeOnSelect fixed

Author: AnwerAR

dist/index.js

@@ -1,64 +1,64 @@
-import React, { useState } from 'react'
-
-import MultiSelect from 'react-multiple-select-dropdown-lite'
-import 'react-multiple-select-dropdown-lite/dist/index.css'
-
-const App = () => {
-  const [value, setvalue] = useState('rf,test,new')
-
-  const handleOnchange = val => {
-    setvalue(val)
-  }
-
-  const customStyle = {
-    display: 'flex', justifyContent: 'space-between', alignItems: 'center'
-  }
-
-  const options = [
-    { label: <div style={customStyle}><h1>Title</h1><span role="img" aria-label="agun">🔥</span></div>, value: 'option_1', title: 'option_1' },
-    { label: 'Option 2', value: '{id: 1}' },
-    { label: 'Select...', value: 'option_3' },
-    { label: 'Rf', value: 'option_4' },
-    {
-      title: 'group 1', type: 'group', emptyDataLabel: 'No Group Option Found', childs: [
-        { label: 'Option 5', value: 'option_5' },
-        { label: 'Option 6', value: 'option_6' },
-        {
-          title: 'group 2', type: 'group', emptyDataLabel: 'No Group Option Found', childs: [
-            { label: 'Option 7', value: 'option_7' },
-            { label: 'Option 8', value: 'option_8' },
-            {
-              title: 'group 3', type: 'group', emptyDataLabel: 'No Group Option Found', childs: [
-                { label: 'Option 9', value: 'option_9' },
-                { label: 'Option 10', value: 'option_10' }
-              ]
-            },
-          ]
-        },
-      ]
-    },
-  ]
-
-  return (
-    <div className="app">
-      <div className="preview-values">
-        <h4>Values</h4>
-        {value.toString()}
-      </div>
-      <MultiSelect
-        defaultValue={value}
-        width={400}
-        onChange={handleOnchange}
-        options={options}
-        customValue
-        // singleSelect
-        // clearable={false}
-        // disableChip
-        onMenuOpen={() => { console.log('menu open') }}
-        onMenuClose={() => { console.log('menu Close') }}
-      />
-    </div>
-  )
-}
-
-export default App
+import React, { useState } from 'react'
+
+import MultiSelect from 'react-multiple-select-dropdown-lite'
+import 'react-multiple-select-dropdown-lite/dist/index.css'
+
+const App = () => {
+  const [value, setvalue] = useState('rf,test,new')
+
+  const handleOnchange = val => {
+    setvalue(val)
+  }
+
+  const customStyle = {
+    display: 'flex', justifyContent: 'space-between', alignItems: 'center'
+  }
+
+  const options = [
+    { label: <div style={customStyle}><h1>Title</h1><span role="img" aria-label="agun">🔥</span></div>, value: 'option_1', title: 'option_1' },
+    { label: 'Option 2', value: '{id: 1}' },
+    { label: 'Select...', value: 'option_3' },
+    { label: 'Rf', value: 'option_4' },
+    {
+      title: 'group 1', type: 'group', emptyDataLabel: 'No Group Option Found', childs: [
+        { label: 'Option 5', value: 'option_5' },
+        { label: 'Option 6', value: 'option_6' },
+        {
+          title: 'group 2', type: 'group', emptyDataLabel: 'No Group Option Found', childs: [
+            { label: 'Option 7', value: 'option_7' },
+            { label: 'Option 8', value: 'option_8' },
+            {
+              title: 'group 3', type: 'group', emptyDataLabel: 'No Group Option Found', childs: [
+                { label: 'Option 9', value: 'option_9' },
+                { label: 'Option 10', value: 'option_10' }
+              ]
+            },
+          ]
+        },
+      ]
+    },
+  ]
+
+  return (
+    <div className="app">
+      <div className="preview-values">
+        <h4>Values</h4>
+        {value.toString()}
+      </div>
+      <MultiSelect
+        defaultValue={value}
+        width={400}
+        onChange={handleOnchange}
+        options={options}
+        customValue
+        // singleSelect
+        // clearable={false}
+        // disableChip
+        onMenuOpen={() => { console.log('menu open') }}
+        onMenuClose={() => { console.log('menu Close') }}
+      />
+    </div>
+  )
+}
+
+export default App

dist/index.js.map

@@ -34,7 +34,8 @@ MultiSelect.defaultProps = {
   ],
   customValue: false,
   chipAlternateText: 'Item Selected',
-  closeOnSelect: true
+  closeOnSelect: true,
+  disableSearch: false,
 }
 
 function MultiSelect({
@@ -62,7 +63,8 @@ function MultiSelect({
   onMenuOpen,
   onMenuClose,
   chipAlternateText,
-  closeOnSelect
+  closeOnSelect,
+  disableSearch
 }) {
   const [value, setValue] = useState([])
   const [options, setOptions] = useState(userOptions || [])
@@ -160,7 +162,9 @@ function MultiSelect({
 
     setValue(preDefinedValue)
     // close on option select
-    closeOnSelect && singleSelect && setMenuOpen(false)
+    if (closeOnSelect && singleSelect) {
+      setMenuOpen(false)
+    }
   }, [defaultValue])
 
   const setNewValue = (val) => {
@@ -224,6 +228,9 @@ function MultiSelect({
   }
 
   const showSearchOption = () => {
+    if (disableSearch) {
+      return false
+    }
     if (!singleSelect && !disableChip) {
       return true
     } else if (singleSelect && !value.length) {