fix inputmultiselect placeholder

Author: vas3a

src/apps/talent-search/src/lib/utils/search-query.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { useSearchParams } from 'react-router-dom'
 
 import { Skill } from '~/libs/shared'
@@ -24,10 +24,10 @@ export const useUrlQuerySearchParms = (paramName: string): [
 
     const [skills, setSkills] = useState<Skill[]>([])
 
-    function handleUpdateSearch(newSkills: Skill[]): void {
+    const handleUpdateSearch = useCallback((newSkills: Skill[]) => {
         const searchParams = encodeUrlQuerySearch(newSkills)
         updateParams(`${searchParams}`)
-    }
+    }, [updateParams])
 
     // update search input whenever the url data changes
     useEffect(() => {

src/libs/ui/lib/components/form/form-groups/form-input/input-multiselect/InputMultiselect.tsx

@@ -3,6 +3,7 @@ import {
     FC,
     KeyboardEvent,
     ReactNode,
+    useMemo,
     useRef,
 } from 'react'
 import { noop } from 'lodash'
@@ -103,6 +104,10 @@ const InputMultiselect: FC<InputMultiselectProps> = (props: InputMultiselectProp
         return !!props.limit && (props.value?.length as number) >= props.limit
     }
 
+    const ValueContainer = useMemo(() => (
+        valueContainer(props.additionalPlaceholder ?? 'Add more...')
+    ), [props.additionalPlaceholder])
+
     const selectInputElement = (
         <AsyncSelect
             className={
@@ -132,7 +137,7 @@ const InputMultiselect: FC<InputMultiselectProps> = (props: InputMultiselectProp
             components={{
                 DropdownIndicator: dropdownIndicator(props.dropdownIcon),
                 MultiValueRemove,
-                ValueContainer: valueContainer(props.additionalPlaceholder ?? 'Add more...'),
+                ValueContainer,
             }}
             value={props.value}
             openMenuOnClick={false}