TSJR-217 - move skill selector menu into separate portal

Author: vas3a

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}
         />
     )