#716 - limit the max no of skills selected in onboarding

Author: vas3a

src/apps/onboarding/src/pages/skills/index.tsx

@@ -16,7 +16,9 @@ export const PageSkillsContent: FC<{
 }> = props => {
     const navigate: any = useNavigate()
     const [loading, setLoading] = useState(false)
-    const { formInput: emsiFormInput, saveSkills: saveEmsiSkills }: MemberSkillEditor = useMemberSkillEditor()
+    const { formInput: emsiFormInput, saveSkills: saveEmsiSkills }: MemberSkillEditor = useMemberSkillEditor({
+        limit: 15,
+    })
 
     async function saveSkills(): Promise<void> {
         setLoading(true)

src/libs/shared/lib/components/input-skill-selector/InputSkillSelector.tsx

@@ -28,6 +28,7 @@ const fetchSkills = (queryTerm: string): Promise<Option[]> => (
 )
 
 interface InputSkillSelectorProps {
+    readonly limit?: number
     readonly loading?: boolean
     readonly value?: EmsiSkill[]
     readonly onChange?: (event: ChangeEvent<HTMLInputElement>) => void
@@ -36,6 +37,7 @@ interface InputSkillSelectorProps {
 const InputSkillSelector: FC<InputSkillSelectorProps> = props => (
     <InputMultiselect
         label='Select Skills'
+        limit={props.limit}
         placeholder='Type to add a skill...'
         onFetchOptions={fetchSkills}
         name='skills'

src/libs/shared/lib/components/member-skill-editor/use-member-skill-editor.tsx

@@ -31,7 +31,9 @@ export interface MemberSkillEditor {
  * @returns
  */
 
-export const useMemberSkillEditor = (): MemberSkillEditor => {
+export const useMemberSkillEditor = ({
+    limit,
+}: {limit?: number} = {}): MemberSkillEditor => {
     const { profile }: ProfileContextData = useContext(profileContext)
     const [isEmsiInitialized, setIsEmsiInitialized] = useState<boolean>(false)
     const [skills, setSkills] = useState<EmsiSkill[]>([])
@@ -120,8 +122,13 @@ export const useMemberSkillEditor = (): MemberSkillEditor => {
 
     // build the form input
     const formInput = useMemo(() => (
-        <InputSkillSelector value={skills} onChange={handleOnChange} loading={loading} />
-    ), [skills, handleOnChange, loading])
+        <InputSkillSelector
+            value={skills}
+            onChange={handleOnChange}
+            loading={loading}
+            limit={limit}
+        />
+    ), [skills, handleOnChange, loading, limit])
 
     return {
         formInput,

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

@@ -26,6 +26,7 @@ interface InputMultiselectProps {
     readonly hideInlineErrors?: boolean
     readonly hint?: string
     readonly label?: string
+    readonly limit?: number
     readonly name: string
     readonly onChange: (event: ChangeEvent<HTMLInputElement>) => void
     readonly options?: ReadonlyArray<InputMultiselectOption>
@@ -55,6 +56,10 @@ const InputMultiselect: FC<InputMultiselectProps> = (props: InputMultiselectProp
         } as unknown as ChangeEvent<HTMLInputElement>)
     }
 
+    function isOptionDisabled(): boolean {
+        return !!props.limit && (props.value?.length as number) >= props.limit
+    }
+
     return (
         <InputWrapper
             {...props}
@@ -63,6 +68,7 @@ const InputMultiselect: FC<InputMultiselectProps> = (props: InputMultiselectProp
             label={(props.label || props.name) ?? 'Select Option'}
             hideInlineErrors={props.hideInlineErrors}
             type='text'
+            hint={props.limit ? ` (max ${props.limit})` : undefined}
         >
             <AsyncSelect
                 className={styles.multiselect}
@@ -79,6 +85,8 @@ const InputMultiselect: FC<InputMultiselectProps> = (props: InputMultiselectProp
                 onBlur={noop}
                 blurInputOnSelect={false}
                 isLoading={props.loading}
+                isOptionDisabled={isOptionDisabled}
+                isSearchable={!isOptionDisabled()}
                 components={{ MultiValueRemove }}
                 value={props.value}
             />