MP-305 - use popper & portals to make the dropdowns in modals overflow the modal body

vas3a · vas3a · commit 8fdb39427dce · 2023-07-28T13:06:51.000+03:00
diff --git a/package.json b/package.json
@@ -23,6 +23,7 @@
   "dependencies": {
     "@datadog/browser-logs": "^4.21.2",
     "@heroicons/react": "^1.0.6",
+    "@popperjs/core": "^2.11.8",
     "@sprig-technologies/sprig-browser": "^2.20.1",
     "@storybook/addon-actions": "^7.0.5",
     "@storybook/react": "^7.0.5",
@@ -83,6 +84,7 @@
     "react-helmet": "^6.1.0",
     "react-html-parser": "^2.0.2",
     "react-markdown": "8.0.6",
+    "react-popper": "^2.3.0",
     "react-redux": "^8.0.4",
     "react-redux-toastr": "^7.6.10",
     "react-responsive": "^9.0.0-beta.5",
diff --git a/src/apps/profiles/src/member-profile/languages/ModifyLanguagesModal/ModifyLanguagesModal.module.scss b/src/apps/profiles/src/member-profile/languages/ModifyLanguagesModal/ModifyLanguagesModal.module.scss
@@ -50,13 +50,3 @@
         }
     }
 }
-
-.langModal {
-    @include gtemd {
-        overflow: visible !important;
-    }
-}
-
-.langModalBody {
-    overflow: visible !important;
-}
diff --git a/src/apps/profiles/src/member-profile/local-info/ModifyLocationModal/ModifyLocationModal.module.scss b/src/apps/profiles/src/member-profile/local-info/ModifyLocationModal/ModifyLocationModal.module.scss
@@ -17,13 +17,3 @@
         margin-bottom: $sp-4;
     }
 }
-
-.localModal {
-    @include gtemd {
-        overflow: visible !important;
-    }
-}
-
-.localModalBody {
-    overflow: visible !important;
-}
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
@@ -28,4 +28,4 @@
 
 .skillsModalBody {
     overflow: visible !important;
-}
+}
diff --git a/src/apps/profiles/src/member-profile/work-expirence/ModifyWorkExpirenceModal/ModifyWorkExpirenceModal.module.scss b/src/apps/profiles/src/member-profile/work-expirence/ModifyWorkExpirenceModal/ModifyWorkExpirenceModal.module.scss
@@ -28,6 +28,10 @@
                 align-items: center;
                 margin-left: $sp-15;
 
+                @include ltemd {
+                    margin-left: $sp-4;
+                }
+
                 :global(button) {
                     padding: $sp-2;
                     color: $turq-160;
@@ -83,4 +87,4 @@
     display: flex;
     justify-content: space-between;
     width: 100%;
-}
+}
diff --git a/src/libs/ui/lib/components/form/form-groups/form-input/input-date-picker/InputDatePicker.module.scss b/src/libs/ui/lib/components/form/form-groups/form-input/input-date-picker/InputDatePicker.module.scss
@@ -1,6 +1,8 @@
 @import '@libs/ui/styles/includes';
 
-.container {
+:global(#react-date-portal) {
+    position: relative;
+    z-index: 10001;
     :global(.react-datepicker__header) {
         background-color: $tc-white;
         border-bottom: none;
@@ -30,34 +32,36 @@
         color: $tc-white;
         border-radius: 50%;
     }
+}
 
-    .headerWrap {
-        display: flex;
-        justify-content: space-between;
-        padding: $sp-2 0;
-        border-bottom: 2px solid $black-5;
+.headerWrap {
+    display: flex;
+    justify-content: space-between;
+    padding: $sp-2 0;
+    border-bottom: 2px solid $black-5;
 
-        button {
-            svg {
-                width: 27px;
-                height: 27px;
-            }
+    button {
+        svg {
+            width: 27px;
+            height: 27px;
         }
+    }
 
-        select {
-            border: none;
-            background-color: transparent;
-            margin: auto;
-            -webkit-appearance: menulist;
-            appearance: menulist;
+    select {
+        border: none;
+        background-color: transparent;
+        margin: auto;
+        -webkit-appearance: menulist;
+        appearance: menulist;
 
-            option:hover {
-                background-color: $turq-160;
-                color: $tc-white;
-            }
+        option:hover {
+            background-color: $turq-160;
+            color: $tc-white;
         }
     }
+}
 
+.container {
     input {
         border: none;
         pointer-events: none;
@@ -74,4 +78,4 @@
             text-transform: none;
         }
     }
-}
+}
diff --git a/src/libs/ui/lib/components/form/form-groups/form-input/input-date-picker/InputDatePicker.tsx b/src/libs/ui/lib/components/form/form-groups/form-input/input-date-picker/InputDatePicker.tsx
@@ -130,6 +130,8 @@ const InputDatePicker: FC<InputDatePickerProps> = (props: InputDatePickerProps)
                 maxTime={props.maxTime}
                 showYearPicker={props.showYearPicker}
                 dateFormat={props.dateFormat}
+                popperPlacement='bottom'
+                portalId='react-date-portal'
             />
         </InputWrapper>
     )
diff --git a/src/libs/ui/lib/components/form/form-groups/form-input/input-select/InputSelect.module.scss b/src/libs/ui/lib/components/form/form-groups/form-input/input-select/InputSelect.module.scss
@@ -23,7 +23,7 @@
     left: 0;
     width: 100%;
     &:not(:empty) {
-        z-index: 9;
+        z-index: 1001;
     }
 }
 
diff --git a/src/libs/ui/lib/components/form/form-groups/form-input/input-select/InputSelect.tsx b/src/libs/ui/lib/components/form/form-groups/form-input/input-select/InputSelect.tsx
@@ -11,12 +11,15 @@ import {
     useRef,
     useState,
 } from 'react'
+import { usePopper } from 'react-popper'
 import classNames from 'classnames'
 
+import { beforeWrite } from '@popperjs/core/lib'
 import { useClickOutside } from '~/libs/shared/lib/hooks'
 
 import { IconOutline } from '../../../../svgs'
 import { InputWrapper } from '../input-wrapper'
+import { Portal } from '../../../../portal'
 
 import styles from './InputSelect.module.scss'
 
@@ -40,12 +43,33 @@ interface InputSelectProps {
     readonly value?: string
 }
 
+const sameWidthModifier = {
+    effect: ({ state }: any) => {
+        state.elements.popper.style.width = `${state.elements.reference.offsetWidth}px`
+    },
+    enabled: true,
+    fn: ({ state }: any) => {
+        state.styles.popper.width = `${state.rects.reference.width}px`
+        return state
+    },
+    name: 'sameWidth',
+    phase: beforeWrite,
+    requires: ['computeStyles'],
+}
+const modifiers = [sameWidthModifier]
+
 const InputSelect: FC<InputSelectProps> = (props: InputSelectProps) => {
     const triggerRef: MutableRefObject<any> = useRef(undefined)
+    const popperRef: MutableRefObject<any> = useRef(undefined)
     const buttonRef: MutableRefObject<HTMLButtonElement | null> = useRef(null)
     const [menuIsVisible, setMenuIsVisible]: [boolean, Dispatch<SetStateAction<boolean>>] = useState(false)
     const [isFocus, setIsFocus]: [boolean, Dispatch<SetStateAction<boolean>>] = useState(false)
 
+    const popper = usePopper(triggerRef.current?.firstChild, popperRef.current, {
+        modifiers,
+        strategy: 'absolute',
+    })
+
     const selectedOption: InputSelectOption | undefined = props.options.find(option => option.value === props.value)
 
     const label: (option: InputSelectOption) => ReactNode = (option?: InputSelectOption) => (
@@ -125,27 +149,34 @@ const InputSelect: FC<InputSelectProps> = (props: InputSelectProps) => {
                 </span>
             </button>
 
-            <div className={styles['menu-wrap']}>
-                {menuIsVisible && (
-                    <div className={styles['select-menu']}>
-                        {props.options.map(option => (
-                            <div
-                                className={
-                                    classNames(
-                                        styles['select-option'],
-                                        'body-main',
-                                        selectedOption === option && 'selected',
-                                    )
-                                }
-                                onClick={select(option)}
-                                key={option.value}
-                            >
-                                {label(option)}
-                            </div>
-                        ))}
-                    </div>
-                )}
-            </div>
+            <Portal>
+                <div
+                    className={styles['menu-wrap']}
+                    ref={popperRef}
+                    style={popper.styles.popper}
+                    {...popper.attributes.popper}
+                >
+                    {menuIsVisible && (
+                        <div className={styles['select-menu']}>
+                            {props.options.map(option => (
+                                <div
+                                    className={
+                                        classNames(
+                                            styles['select-option'],
+                                            'body-main',
+                                            selectedOption === option && 'selected',
+                                        )
+                                    }
+                                    onClick={select(option)}
+                                    key={option.value}
+                                >
+                                    {label(option)}
+                                </div>
+                            ))}
+                        </div>
+                    )}
+                </div>
+            </Portal>
 
         </InputWrapper>
     )
diff --git a/yarn.lock b/yarn.lock
@@ -1504,13 +1504,6 @@
   dependencies:
     regenerator-runtime "^0.13.11"
 
-"@babel/runtime@^7.13.8", "@babel/runtime@^7.6.3":
-  version "7.22.6"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.6.tgz#57d64b9ae3cff1d67eb067ae117dac087f5bd438"
-  integrity sha512-wDb5pWm4WDdF6LFUde3Jl8WzPA+3ZbxYqkC6xAXuD3irdEHN1k0NfTRrJD8ZD378SJ61miMLCqIOXYhd8x+AJQ==
-  dependencies:
-    regenerator-runtime "^0.13.11"
-
 "@babel/runtime@^7.17.8", "@babel/runtime@^7.7.6":
   version "7.21.0"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.21.0.tgz#5b55c9d394e5fcf304909a8b00c07dc217b56673"
@@ -2728,7 +2721,7 @@
   resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.21.tgz#5de5a2385a35309427f6011992b544514d559aa1"
   integrity sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==
 
-"@popperjs/core@^2.11.6", "@popperjs/core@^2.9.2":
+"@popperjs/core@^2.11.8", "@popperjs/core@^2.9.2":
   version "2.11.8"
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
   integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
@@ -2738,13 +2731,6 @@
   resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.0.5.tgz#d5c65626add4c3c185a89aa5bd38b1e42daec075"
   integrity sha512-my0Mycd+jruq/1lQuO5LBB6WTlL/e8DTCYWp44DfMTDcXz8DcTlgF0ISaLsGewt+ctHN+yA8xMq3q/N7uWJPug==
 
-"@restart/hooks@^0.4.7":
-  version "0.4.9"
-  resolved "https://registry.yarnpkg.com/@restart/hooks/-/hooks-0.4.9.tgz#ad858fb39d99e252cccce19416adc18fc3f18fcb"
-  integrity sha512-3BekqcwB6Umeya+16XPooARn4qEPW6vNvwYnlofIYe6h9qG1/VeD7UvShCWx11eFz5ELYmwIEshz+MkPX3wjcQ==
-  dependencies:
-    dequal "^2.0.2"
-
 "@rollup/plugin-babel@^5.2.0":
   version "5.3.1"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz#04bc0608f4aa4b2e4b1aebf284344d0f68fda283"
@@ -4533,15 +4519,6 @@
     "@types/scheduler" "*"
     csstype "^3.0.2"
 
-"@types/react@>=16.9.11":
-  version "18.2.14"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.14.tgz#fa7a6fecf1ce35ca94e74874f70c56ce88f7a127"
-  integrity sha512-A0zjq+QN/O0Kpe30hA1GidzyFjatVvrpIvWLxD+xv67Vt91TWWgco9IvrJBkeyHm1trGaFS/FSGqPlhyeZRm0g==
-  dependencies:
-    "@types/prop-types" "*"
-    "@types/scheduler" "*"
-    csstype "^3.0.2"
-
 "@types/redux-actions@2.6.2":
   version "2.6.2"
   resolved "https://registry.yarnpkg.com/@types/redux-actions/-/redux-actions-2.6.2.tgz#5956d9e7b9a644358e2c0610f47b1fa3060edc21"
@@ -4686,11 +4663,6 @@
   resolved "https://registry.yarnpkg.com/@types/validator/-/validator-13.7.10.tgz#f9763dc0933f8324920afa9c0790308eedf55ca7"
   integrity sha512-t1yxFAR2n0+VO6hd/FJ9F2uezAZVWHLmpmlJzm1eX03+H7+HsuTAp7L8QJs+2pQCfWkP1+EXsGK9Z9v7o/qPVQ==
 
-"@types/warning@^3.0.0":
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/@types/warning/-/warning-3.0.0.tgz#0d2501268ad8f9962b740d387c4654f5f8e23e52"
-  integrity sha512-t/Tvs5qR47OLOr+4E9ckN8AmP2Tf16gWq+/qA4iUGS/OOyHVO8wv2vjJuX8SNOUTJyWb+2t7wJm6cXILFnOROA==
-
 "@types/ws@^8.5.1":
   version "8.5.3"
   resolved "https://registry.yarnpkg.com/@types/ws/-/ws-8.5.3.tgz#7d25a1ffbecd3c4f2d35068d0b283c037003274d"
@@ -7768,7 +7740,7 @@ dom-converter@^0.2.0:
   dependencies:
     utila "~0.4"
 
-dom-helpers@^5.0.1, dom-helpers@^5.2.0:
+dom-helpers@^5.0.1:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902"
   integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==
@@ -15381,20 +15353,6 @@ react-only-when@^1.0.2:
   resolved "https://registry.yarnpkg.com/react-only-when/-/react-only-when-1.0.2.tgz#a8a79b48dd6cfbd91ddc710674a94153e88039d3"
   integrity sha512-agE6l3L6bqaVuwNtjihTQ36M+VBfPS63KOzcNL4ZTmlwSxQPvhzIqmBWfiol0/wLYmKxCcBqgXkEJpvj5Kob8Q==
 
-react-overlays@^5.2.1:
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/react-overlays/-/react-overlays-5.2.1.tgz#49dc007321adb6784e1f212403f0fb37a74ab86b"
-  integrity sha512-GLLSOLWr21CqtJn8geSwQfoJufdt3mfdsnIiQswouuQ2MMPns+ihZklxvsTDKD3cR2tF8ELbi5xUsvqVhR6WvA==
-  dependencies:
-    "@babel/runtime" "^7.13.8"
-    "@popperjs/core" "^2.11.6"
-    "@restart/hooks" "^0.4.7"
-    "@types/warning" "^3.0.0"
-    dom-helpers "^5.2.0"
-    prop-types "^15.7.2"
-    uncontrollable "^7.2.1"
-    warning "^4.0.3"
-
 react-popper@^2.2.5, react-popper@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-2.3.0.tgz#17891c620e1320dce318bad9fede46a5f71c70ba"
@@ -18046,16 +18004,6 @@ unbox-primitive@^1.0.2:
     has-symbols "^1.0.3"
     which-boxed-primitive "^1.0.2"
 
-uncontrollable@^7.2.1:
-  version "7.2.1"
-  resolved "https://registry.yarnpkg.com/uncontrollable/-/uncontrollable-7.2.1.tgz#1fa70ba0c57a14d5f78905d533cf63916dc75738"
-  integrity sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==
-  dependencies:
-    "@babel/runtime" "^7.6.3"
-    "@types/react" ">=16.9.11"
-    invariant "^2.2.4"
-    react-lifecycles-compat "^3.0.4"
-
 unfetch@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/unfetch/-/unfetch-4.2.0.tgz#7e21b0ef7d363d8d9af0fb929a5555f6ef97a3be"
@@ -18491,7 +18439,7 @@ walker@^1.0.7, walker@^1.0.8:
   dependencies:
     makeerror "1.0.12"
 
-warning@^4.0.2, warning@^4.0.3:
+warning@^4.0.2:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
   integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==

Original file line number	Diff line number	Diff line change
`@@ -50,13 +50,3 @@`
`50`	`50`	`}`
`51`	`51`	`}`
`52`	`52`	`}`
`53`		`-`
`54`		`-.langModal {`
`55`		`- @include gtemd {`
`56`		`- overflow: visible !important;`
`57`		`- }`
`58`		`-}`
`59`		`-`
`60`		`-.langModalBody {`
`61`		`- overflow: visible !important;`
`62`		`-}`
Original file line number	Diff line number	Diff line change
`@@ -17,13 +17,3 @@`
`17`	`17`	`margin-bottom: $sp-4;`
`18`	`18`	`}`
`19`	`19`	`}`
`20`		`-`
`21`		`-.localModal {`
`22`		`- @include gtemd {`
`23`		`- overflow: visible !important;`
`24`		`- }`
`25`		`-}`
`26`		`-`
`27`		`-.localModalBody {`
`28`		`- overflow: visible !important;`
`29`		`-}`
Original file line number	Diff line number	Diff line change
`@@ -130,6 +130,8 @@ const InputDatePicker: FC<InputDatePickerProps> = (props: InputDatePickerProps)`
`130`	`130`	`maxTime={props.maxTime}`
`131`	`131`	`showYearPicker={props.showYearPicker}`
`132`	`132`	`dateFormat={props.dateFormat}`
	`133`	`+ popperPlacement='bottom'`
	`134`	`+ portalId='react-date-portal'`
`133`	`135`	`/>`
`134`	`136`	`</InputWrapper>`
`135`	`137`	`)`
Original file line number	Diff line number	Diff line change
`@@ -23,7 +23,7 @@`
`23`	`23`	`left: 0;`
`24`	`24`	`width: 100%;`
`25`	`25`	`&:not(:empty) {`
`26`		`- z-index: 9;`
	`26`	`+ z-index: 1001;`
`27`	`27`	`}`
`28`	`28`	`}`
`29`	`29`