From 2bd1e6204ceb6c2d125e6bd1d1acda8bced23c18 Mon Sep 17 00:00:00 2001 From: Vasilica Olariu Date: Thu, 16 Nov 2023 12:11:00 +0200 Subject: [PATCH 1/3] Update react-select@5.8.0 --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 584a7f6a9..bde1c9251 100644 --- a/package.json +++ b/package.json @@ -92,7 +92,7 @@ "react-responsive-modal": "^6.2.0", "react-router-dom": "^6.4.2", "react-scripts": "5.0.1", - "react-select": "^5.5.0", + "react-select": "^5.8.0", "react-spinners": "^0.13.6", "react-stickynode": "^1.4.1", "react-toastify": "^9.0.8", diff --git a/yarn.lock b/yarn.lock index 8954e2c9d..c722b66b2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -16417,10 +16417,10 @@ react-scripts@5.0.1: optionalDependencies: fsevents "^2.3.2" -react-select@^5.5.0: - version "5.7.0" - resolved "https://registry.yarnpkg.com/react-select/-/react-select-5.7.0.tgz#82921b38f1fcf1471a0b62304da01f2896cd8ce6" - integrity sha512-lJGiMxCa3cqnUr2Jjtg9YHsaytiZqeNOKeibv6WF5zbK/fPegZ1hg3y/9P1RZVLhqBTs0PfqQLKuAACednYGhQ== +react-select@^5.8.0: + version "5.8.0" + resolved "https://registry.yarnpkg.com/react-select/-/react-select-5.8.0.tgz#bd5c467a4df223f079dd720be9498076a3f085b5" + integrity sha512-TfjLDo58XrhP6VG5M/Mi56Us0Yt8X7xD6cDybC7yoRMUNm7BGO7qk8J0TLQOua/prb8vUOtsfnXZwfm30HGsAA== dependencies: "@babel/runtime" "^7.12.0" "@emotion/cache" "^11.4.0" From aa7d4b2d6670fa85c0ff7abffa98692a61462e4b Mon Sep 17 00:00:00 2001 From: Vasilica Olariu Date: Thu, 16 Nov 2023 12:19:43 +0200 Subject: [PATCH 2/3] TSJR-217 - move skill selector menu into separate portal --- .../ModifySkillsModal.module.scss | 4 +++- .../input-multiselect/InputMultiselect.module.scss | 9 +++++---- .../input-multiselect/InputMultiselect.tsx | 14 ++++++++++++++ 3 files changed, 22 insertions(+), 5 deletions(-) diff --git a/src/apps/profiles/src/member-profile/skills/ModifySkillsModal/ModifySkillsModal.module.scss b/src/apps/profiles/src/member-profile/skills/ModifySkillsModal/ModifySkillsModal.module.scss index 672dc7024..865df4068 100644 --- a/src/apps/profiles/src/member-profile/skills/ModifySkillsModal/ModifySkillsModal.module.scss +++ b/src/apps/profiles/src/member-profile/skills/ModifySkillsModal/ModifySkillsModal.module.scss @@ -28,7 +28,9 @@ } .skillsModalBody { - overflow: visible !important; + :global(.ms--value-container) { + max-height: 90px; + } } .principalIntroLink { diff --git a/src/libs/ui/lib/components/form/form-groups/form-input/input-multiselect/InputMultiselect.module.scss b/src/libs/ui/lib/components/form/form-groups/form-input/input-multiselect/InputMultiselect.module.scss index 61c380268..dea72e051 100644 --- a/src/libs/ui/lib/components/form/form-groups/form-input/input-multiselect/InputMultiselect.module.scss +++ b/src/libs/ui/lib/components/form/form-groups/form-input/input-multiselect/InputMultiselect.module.scss @@ -127,13 +127,14 @@ font-weight: $font-weight-medium; } } +} +.ms { + &:global(__menu-portal).ms:global(__menu-portal) { + z-index: 1001; + } &:global(__menu) { - top: 100%; - left: 0; - position: absolute; width: 100%; - z-index: 1; background-color: $tc-white; border-radius: 4px; box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.25); 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 a70573ed8..a583ea99e 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 @@ -84,6 +84,18 @@ const dropdownIndicator = (dropdownIcon: ReactNode): FC => (props: any) => ( ) const InputMultiselect: FC = props => { + // we need to create a portal to append our menus so they are always visible + const menuPortalTarget = useMemo(() => { + const el = document.getElementById('input-ms-menu-target-portal') ?? document.createElement('div') + el.id = 'input-ms-menu-target-portal' + + if (!document.body.contains(el)) { + document.body.append(el) + } + + return el + }, []) + const asynSelectRef = useRef() const placeholder = useMemo(() => ( (props.value?.length as number) > 0 ? props.additionalPlaceholder ?? 'Add more...' : props.placeholder @@ -132,6 +144,7 @@ const InputMultiselect: FC = props => { props.useWrapper === false && styles.multiSelectWrap, ) } + classNames={{ valueContainer: () => 'ms--value-container' }} ref={props.inputRef ?? asynSelectRef} classNamePrefix={styles.ms} unstyled @@ -156,6 +169,7 @@ const InputMultiselect: FC = props => { openMenuOnClick={false} onKeyDown={handleKeyPress} filterOption={props.filterOption} + menuPortalTarget={menuPortalTarget} /> ) From 55704171466003adc1e6c69fea7dce2cb9412b16 Mon Sep 17 00:00:00 2001 From: Vasilica Olariu Date: Thu, 16 Nov 2023 12:32:12 +0200 Subject: [PATCH 3/3] TSJR-217 - update onboarding to make skills selector work --- src/apps/onboarding/src/pages/onboarding/index.tsx | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/src/apps/onboarding/src/pages/onboarding/index.tsx b/src/apps/onboarding/src/pages/onboarding/index.tsx index b9ca5cc86..55447227d 100644 --- a/src/apps/onboarding/src/pages/onboarding/index.tsx +++ b/src/apps/onboarding/src/pages/onboarding/index.tsx @@ -5,6 +5,7 @@ import classNames from 'classnames' import { routerContext, RouterContextData } from '~/libs/core' import { Member } from '~/apps/talent-search/src/lib/models' +import { SharedSwrConfig } from '~/libs/shared' import { EnvironmentConfig } from '~/config' import { onboardRouteId } from '../../onboarding.routes' @@ -52,11 +53,13 @@ const OnboardingContent: FC<{ } export const OnboardingWrapper: FC<{}> = () => ( -
- - - -
+ +
+ + + +
+ ) export default OnboardingWrapper