diff --git a/src/apps/onboarding/src/pages/skills/index.tsx b/src/apps/onboarding/src/pages/skills/index.tsx index 8d931d7b3..8adbde968 100644 --- a/src/apps/onboarding/src/pages/skills/index.tsx +++ b/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 { setLoading(true) diff --git a/src/libs/shared/lib/components/input-skill-selector/InputSkillSelector.tsx b/src/libs/shared/lib/components/input-skill-selector/InputSkillSelector.tsx index 9b206b30e..5109749ab 100644 --- a/src/libs/shared/lib/components/input-skill-selector/InputSkillSelector.tsx +++ b/src/libs/shared/lib/components/input-skill-selector/InputSkillSelector.tsx @@ -28,6 +28,7 @@ const fetchSkills = (queryTerm: string): Promise => ( ) interface InputSkillSelectorProps { + readonly limit?: number readonly loading?: boolean readonly value?: EmsiSkill[] readonly onChange?: (event: ChangeEvent) => void @@ -36,6 +37,7 @@ interface InputSkillSelectorProps { const InputSkillSelector: FC = props => ( { +export const useMemberSkillEditor = ({ + limit, +}: {limit?: number} = {}): MemberSkillEditor => { const { profile }: ProfileContextData = useContext(profileContext) const [isEmsiInitialized, setIsEmsiInitialized] = useState(false) const [skills, setSkills] = useState([]) @@ -120,8 +122,13 @@ export const useMemberSkillEditor = (): MemberSkillEditor => { // build the form input const formInput = useMemo(() => ( - - ), [skills, handleOnChange, loading]) + + ), [skills, handleOnChange, loading, limit]) return { formInput, diff --git a/src/libs/ui/lib/components/form/form-groups/form-input/input-multiselect/InputMultiselect.tsx b/src/libs/ui/lib/components/form/form-groups/form-input/input-multiselect/InputMultiselect.tsx index c28e60dda..883134f11 100644 --- a/src/libs/ui/lib/components/form/form-groups/form-input/input-multiselect/InputMultiselect.tsx +++ b/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) => void readonly options?: ReadonlyArray @@ -55,6 +56,10 @@ const InputMultiselect: FC = (props: InputMultiselectProp } as unknown as ChangeEvent) } + function isOptionDisabled(): boolean { + return !!props.limit && (props.value?.length as number) >= props.limit + } + return ( = (props: InputMultiselectProp label={(props.label || props.name) ?? 'Select Option'} hideInlineErrors={props.hideInlineErrors} type='text' + hint={props.limit ? ` (max ${props.limit})` : undefined} > = (props: InputMultiselectProp onBlur={noop} blurInputOnSelect={false} isLoading={props.loading} + isOptionDisabled={isOptionDisabled} + isSearchable={!isOptionDisabled()} components={{ MultiValueRemove }} value={props.value} />