Merge pull request #944 from topcoder-platform/TSJR-217_fix-skills-selector

TSJR-217 fix skills selector -> dev

Author: vas3a

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",

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<{}> = () => (
-    <div className={classNames(styles.blockWrapper, 'd-flex flex-column align-items-center')}>
-        <Provider store={store}>
-            <OnboardingContent />
-        </Provider>
-    </div>
+    <SharedSwrConfig>
+        <div className={classNames(styles.blockWrapper, 'd-flex flex-column align-items-center')}>
+            <Provider store={store}>
+                <OnboardingContent />
+            </Provider>
+        </div>
+    </SharedSwrConfig>
 )
 
 export default OnboardingWrapper

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 {

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);

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<InputMultiselectProps> = 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<any>()
     const placeholder = useMemo(() => (
         (props.value?.length as number) > 0 ? props.additionalPlaceholder ?? 'Add more...' : props.placeholder
@@ -132,6 +144,7 @@ const InputMultiselect: FC<InputMultiselectProps> = 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<InputMultiselectProps> = props => {
             openMenuOnClick={false}
             onKeyDown={handleKeyPress}
             filterOption={props.filterOption}
+            menuPortalTarget={menuPortalTarget}
         />
     )
 

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"