Fix floating dropdowns

talent-connect · Mar 9, 2023 · c37920d · c37920d
1 parent 3d4ab05
commit c37920d
Show file tree

Hide file tree

Showing 11 changed files with 40 additions and 2 deletions.
diff --git a/apps/redi-connect/src/components/organisms/DeclineMentorshipButton.tsx b/apps/redi-connect/src/components/organisms/DeclineMentorshipButton.tsx
@@ -97,6 +97,8 @@ const DeclineMentorshipButton = ({
               name="ifDeclinedByMentor_chosenReasonForDecline"
               label=""
               items={formDeclineOptions}
+              menuPortalTarget={document.body}
+              menuPosition="fixed"
               formik={formik}
             />
             {formik.values.ifDeclinedByMentor_chosenReasonForDecline ===

diff --git a/apps/redi-connect/src/components/organisms/modules/MSessions.tsx b/apps/redi-connect/src/components/organisms/modules/MSessions.tsx
@@ -163,6 +163,8 @@ const MSessions = ({
                 name="minuteDuration"
                 placeholder="Add the duration of the session"
                 items={formMentoringSessionDurationOptions}
+                menuPortalTarget={document.body}
+                menuPosition="fixed"
                 formik={formik}
               />
             </form>

diff --git a/...di-talent-pool/src/components/organisms/company-profile-editables/EditableJobPostings.tsx b/...di-talent-pool/src/components/organisms/company-profile-editables/EditableJobPostings.tsx
@@ -319,12 +319,16 @@ function ModalForm({
             multiselect
             placeholder="Start typing and select skills"
             closeMenuOnSelect={false}
+            menuPortalTarget={document.body}
+            menuPosition="fixed"
           />
           <FormSelect
             label="Employment type*"
             name="employmentType"
             items={formEmploymentType}
             formik={formik}
+            menuPortalTarget={document.body}
+            menuPosition="fixed"
           />
           <FormInput
             name="languageRequirements"

diff --git a/...di-talent-pool/src/components/organisms/jobseeker-profile-editables/EditableEducation.tsx b/...di-talent-pool/src/components/organisms/jobseeker-profile-editables/EditableEducation.tsx
@@ -363,6 +363,8 @@ export function JobseekerFormSectionEducation({
                               name={`education[${index}].startDateMonth`}
                               label="Started in month*"
                               items={formMonthsOptions}
+                              menuPortalTarget={document.body}
+                              menuPosition="fixed"
                               formik={formik}
                             />
                           </Columns.Column>
@@ -382,6 +384,8 @@ export function JobseekerFormSectionEducation({
                                 name={`education[${index}].endDateMonth`}
                                 label="Ended in month*"
                                 items={formMonthsOptions}
+                                menuPortalTarget={document.body}
+                                menuPosition="fixed"
                                 formik={formik}
                               />
                             </Columns.Column>

diff --git a/...nt-pool/src/components/organisms/jobseeker-profile-editables/EditableImportantDetails.tsx b/...nt-pool/src/components/organisms/jobseeker-profile-editables/EditableImportantDetails.tsx
@@ -314,11 +314,15 @@ export function JobseekerFormSectionImportantDetails({
             multiselect
             placeholder="Select desired employment types"
             closeMenuOnSelect={false}
+            menuPortalTarget={document.body}
+            menuPosition="fixed"
           />
           <FormSelect
             label="When are you available to start?*"
             name="availability"
             items={formAvailabilityOptions}
+            menuPortalTarget={document.body}
+            menuPosition="fixed"
             formik={formik}
           />
           {formik.values.availability === 'date' ? (
@@ -338,6 +342,8 @@ export function JobseekerFormSectionImportantDetails({
             label="What is your immigration status?"
             name="immigrationStatus"
             items={formImmigrationStatusOptions}
+            menuPortalTarget={document.body}
+            menuPosition="fixed"
             formik={formik}
           />
         </>

diff --git a/...di-talent-pool/src/components/organisms/jobseeker-profile-editables/EditableLanguages.tsx b/...di-talent-pool/src/components/organisms/jobseeker-profile-editables/EditableLanguages.tsx
@@ -251,12 +251,16 @@ export function JobseekerFormSectionLanguages({
                           name={`workingLanguages[${index}].language`}
                           label="Language*"
                           items={formLanguages}
+                          menuPortalTarget={document.body}
+                          menuPosition="fixed"
                           formik={formik}
                         />
                         <FormSelect
                           name={`workingLanguages[${index}].proficiencyLevelId`}
                           label="Level of proficiency*"
                           items={formLanguageProficiencyLevels}
+                          menuPortalTarget={document.body}
+                          menuPosition="fixed"
                           formik={formik}
                         />
                       </FormDraggableAccordion>

diff --git a/...t-pool/src/components/organisms/jobseeker-profile-editables/EditableNamePhotoLocation.tsx b/...t-pool/src/components/organisms/jobseeker-profile-editables/EditableNamePhotoLocation.tsx
@@ -208,6 +208,8 @@ function ModalForm({
         name="federalState"
         label="Your place of residence (state)*"
         items={federalStatesOptions}
+        menuPortalTarget={document.body}
+        menuPosition="fixed"
         formik={formik}
       />
       <Checkbox.Form

diff --git a/...edi-talent-pool/src/components/organisms/jobseeker-profile-editables/EditableOverview.tsx b/...edi-talent-pool/src/components/organisms/jobseeker-profile-editables/EditableOverview.tsx
@@ -165,12 +165,16 @@ export function JobseekerFormSectionOverview({
         multiselect
         placeholder="Start typing and select positions"
         closeMenuOnSelect={false}
+        menuPortalTarget={document.body}
+        menuPosition="fixed"
       />
       {hideCurrentRediCourseField ? null : (
         <FormSelect
           label="Current ReDI course"
           name="currentlyEnrolledInCourse"
           items={formCourses}
+          menuPortalTarget={document.body}
+          menuPosition="fixed"
           formik={formik}
         />
       )}

diff --git a/...l/src/components/organisms/jobseeker-profile-editables/EditableProfessionalExperience.tsx b/...l/src/components/organisms/jobseeker-profile-editables/EditableProfessionalExperience.tsx
@@ -356,6 +356,8 @@ export function JobseekerFormSectionProfessionalExperience({
                               name={`experience[${index}].startDateMonth`}
                               label="Started in month*"
                               items={formMonthsOptions}
+                              menuPortalTarget={document.body}
+                              menuPosition="fixed"
                               formik={formik}
                             />
                           </Columns.Column>
@@ -375,6 +377,8 @@ export function JobseekerFormSectionProfessionalExperience({
                                 name={`experience[${index}].endDateMonth`}
                                 label="Ended in month*"
                                 items={formMonthsOptions}
+                                menuPortalTarget={document.body}
+                                menuPosition="fixed"
                                 formik={formik}
                               />
                             </Columns.Column>

diff --git a/...redi-talent-pool/src/components/organisms/jobseeker-profile-editables/EditableSummary.tsx b/...redi-talent-pool/src/components/organisms/jobseeker-profile-editables/EditableSummary.tsx
@@ -190,6 +190,8 @@ export function JobseekerFormSectionSummary({
         multiselect
         placeholder="Start typing and select skills"
         closeMenuOnSelect={false}
+        menuPortalTarget={document.body}
+        menuPosition="fixed"
       />
       <FormTextArea
         label="About you* (100-600 characters)"

diff --git a/libs/shared-atomic-design-components/src/lib/atoms/FormSelect.tsx b/libs/shared-atomic-design-components/src/lib/atoms/FormSelect.tsx
@@ -37,6 +37,8 @@ interface FormSelectProps {
   multiselect?: boolean,
   disabled?: boolean,
   closeMenuOnSelect?: boolean,
+  menuPortalTarget?: HTMLElement,
+  menuPosition?: string,
   formik: ReturnType<typeof useFormik>
 }
 
@@ -50,6 +52,8 @@ function FormSelect(props: FormSelectProps) {
     multiselect,
     disabled,
     closeMenuOnSelect,
+    menuPortalTarget,
+    menuPosition,
     formik: { values, setFieldTouched, setFieldValue, touched, errors, handleBlur, isSubmitting }
   } = props
 
@@ -96,8 +100,8 @@ function FormSelect(props: FormSelectProps) {
           isDisabled={isSubmitting || disabled}
           isMulti={multiselect}
           styles={formSelectStyles}
-          menuPortalTarget={document.body}
-          menuPosition="fixed"
+          menuPortalTarget={menuPortalTarget}
+          menuPosition={menuPosition}
           closeMenuOnSelect={closeMenuOnSelect}
         />
       </Form.Control>