fix: custom menu item renderer on select

PrabhuKathiresan · May 27, 2022 · c0b029f · c0b029f
1 parent cfc8d26
commit c0b029f
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 6 deletions.
diff --git a/example/src/SelectComponent.js b/example/src/SelectComponent.js
@@ -112,6 +112,7 @@ export default function SelectComponent() {
             searchable
             label={`${options.label} - Async version`}
             onSearch={handleSearch}
+            customMenuItemRender={(item) => <span style={{ color: 'teal' }}>{item.name}</span>}
           />
         </div>
         <div className='col-lg-3'>

diff --git a/src/Select/helpers.ts b/src/Select/helpers.ts
@@ -14,6 +14,8 @@ export const stringify = (value: object) => JSON.stringify(value)
 export const isEqual = (obj1: object = {}, obj2: object = {}) => stringify(obj1) === stringify(obj2)
 
 function isMatch(input: string, string: string, props: SelectProps) {
+  if (props.async) return true
+
   let searchStr = input
   let str = string
 

diff --git a/src/Select/props.ts b/src/Select/props.ts
@@ -28,6 +28,7 @@ export interface SelectProps extends InputProps {
   animate?: boolean
   transitionDuration?: number
   onMenuItemRender?: Function
+  customMenuItemRender?: Function
   dropup?: boolean
   flip?: boolean
   containerClass?: string

diff --git a/src/Select/utils.ts b/src/Select/utils.ts
@@ -49,10 +49,7 @@ export const getStateFromProps = (props: SelectProps): SelectState => {
 
   let stateSelected = optionsMap([...selected], props)
 
-  // selected = optionsMap([...selected], props)
-
   if (!multiple && stateSelected && stateSelected.length) {
-    // selected = [...selected].shift() || {}
     let [first] = selected
     value = first[labelKey]
   }
@@ -103,19 +100,19 @@ export const constructMenuProps = (props: any) => {
 }
 
 export const optionsMap = (options: Array<OptionProps | string>, props: SelectProps): Array<OptionProps> => {
-  let { labelKey, onMenuItemRender } = props
+  let { labelKey, customMenuItemRender } = props
   return options.map(option => {
     if (typeof option === 'string') {
       return {
         [labelKey]: option,
-        __label: onMenuItemRender ? onMenuItemRender(option) : option,
+        __label: customMenuItemRender ? customMenuItemRender(option) : option,
         [ACTUAL_VALUE]: option
       }
     } else {
       return {
         ...option,
         [labelKey]: option[labelKey],
-        __label: onMenuItemRender ? onMenuItemRender(option) : option[labelKey],
+        __label: customMenuItemRender ? customMenuItemRender(option) : option[labelKey],
         [ACTUAL_VALUE]: {
           ...option
         }