fix: Fix Select z-index issues

ExpediaGroup · Apr 26, 2023 · a95401b · a95401b
1 parent 8d8d747
commit a95401b
Show file tree

Hide file tree

Showing 7 changed files with 11 additions and 18 deletions.
diff --git a/.../frontend/src/pages/insight-editor/components/insight-metadata-editor/insight-authors.tsx b/.../frontend/src/pages/insight-editor/components/insight-metadata-editor/insight-authors.tsx
@@ -69,9 +69,8 @@ export const InsightAuthors = ({ insight, form }) => {
                   onChange(values);
                 }}
                 value={value?.map((author: string) => ({ value: author, label: author }))}
+                menuPortalTarget={document.body}
                 styles={{
-                  menu: (base) => ({ ...base, zIndex: 11 }),
-                  menuPortal: (base) => ({ ...base, zIndex: 11 }),
                   container: (base) => ({ ...base, width: '100%' }),
                   valueContainer: (base) => ({ ...base, paddingLeft: '40px' })
                 }}
@@ -108,9 +107,8 @@ export const InsightAuthors = ({ insight, form }) => {
                   onChange(values);
                 }}
                 value={value?.map((author: string) => ({ value: author, label: author }))}
+                menuPortalTarget={document.body}
                 styles={{
-                  menu: (base) => ({ ...base, zIndex: 11 }),
-                  menuPortal: (base) => ({ ...base, zIndex: 11 }),
                   container: (base) => ({ ...base, width: '100%' }),
                   valueContainer: (base) => ({ ...base, paddingLeft: '40px' })
                 }}

diff --git a/...d/src/pages/insight-editor/components/insight-metadata-editor/insight-metadata-editor.tsx b/...d/src/pages/insight-editor/components/insight-metadata-editor/insight-metadata-editor.tsx
@@ -144,11 +144,10 @@ export const InsightMetadataEditor = ({ insight, isNewInsight, form, templates,
                   }
                 }}
                 value={itemTypeOptions && value && itemTypeOptions.find((type) => type.name === value)}
+                menuPortalTarget={document.body}
                 styles={{
-                  menu: (base) => ({ ...base, zIndex: 11 }),
                   container: (base) => ({ ...base, width: '100%' }),
-                  valueContainer: (base) => ({ ...base, paddingLeft: '10px' }),
-                  menuPortal: (base) => ({ ...base, zIndex: 9999 })
+                  valueContainer: (base) => ({ ...base, paddingLeft: '10px' })
                 }}
               />
             )}

diff --git a/...ges/frontend/src/pages/insight-editor/components/insight-metadata-editor/insight-tags.tsx b/...ges/frontend/src/pages/insight-editor/components/insight-metadata-editor/insight-tags.tsx
@@ -76,9 +76,8 @@ export const InsightTags = ({ insight, form }) => {
                 onChange(tags);
               }}
               value={value.map((tag: string) => ({ value: tag, label: tag }))}
+              menuPortalTarget={document.body}
               styles={{
-                menu: (base) => ({ ...base, zIndex: 11 }),
-                menuPortal: (base) => ({ ...base, zIndex: 11 }),
                 container: (base) => ({ ...base, width: '100%' }),
                 valueContainer: (base) => ({ ...base, paddingLeft: '40px' })
               }}

diff --git a/...ges/frontend/src/pages/insight-editor/components/insight-metadata-editor/insight-team.tsx b/...ges/frontend/src/pages/insight-editor/components/insight-metadata-editor/insight-team.tsx
@@ -75,9 +75,8 @@ export const InsightTeam = ({ insight, form }) => {
                 }
               }}
               value={{ value, label: value }}
+              menuPortalTarget={document.body}
               styles={{
-                menu: (base) => ({ ...base, zIndex: 11 }),
-                menuPortal: (base) => ({ ...base, zIndex: 11 }),
                 container: (base) => ({ ...base, width: '100%' }),
                 valueContainer: (base) => ({ ...base, paddingLeft: '40px' })
               }}

diff --git a/packages/frontend/src/pages/settings-page/components/insights-settings/insights-settings.tsx b/packages/frontend/src/pages/settings-page/components/insights-settings/insights-settings.tsx
@@ -85,11 +85,10 @@ export const InsightsSettings = ({ user, onSubmit, isSubmitting }: Props) => {
                 onChange={(e) => (e == null || e == '' ? onChange('') : onChange(e.value))}
                 value={(templateOptions && value && templateOptions.find((t) => t.value === value)) ?? { value: '' }}
                 isClearable={true}
+                menuPortalTarget={document.body}
                 styles={{
-                  menu: (base) => ({ ...base, zIndex: 11 }),
                   container: (base) => ({ ...base, width: '100%' }),
-                  valueContainer: (base) => ({ ...base, paddingLeft: '10px' }),
-                  menuPortal: (base) => ({ ...base, zIndex: 9999 })
+                  valueContainer: (base) => ({ ...base, paddingLeft: '10px' })
                 }}
               />
             )}

diff --git a/packages/frontend/src/pages/settings-page/components/profile-settings/profile-settings.tsx b/packages/frontend/src/pages/settings-page/components/profile-settings/profile-settings.tsx
@@ -275,8 +275,8 @@ export const ProfileSettings = ({ user, onSubmit, isSubmitting }: Props) => {
                         }
                       }}
                       value={{ value, label: value }}
+                      menuPortalTarget={document.body}
                       styles={{
-                        menu: (base) => ({ ...base, zIndex: 11 }),
                         container: (base) => ({ ...base, width: '100%' }),
                         valueContainer: (base) => ({ ...base, paddingLeft: '40px' })
                       }}

diff --git a/packages/frontend/src/pages/settings-page/components/system-settings/system-settings.tsx b/packages/frontend/src/pages/settings-page/components/system-settings/system-settings.tsx
@@ -76,11 +76,10 @@ export const SystemSettings = ({ user, onSubmit, isSubmitting }: Props) => {
                     }}
                     value={localeOptions && value && localeOptions.find((l) => l.value === value)}
                     placeholder={`Detected (${detectedLocale})`}
+                    menuPortalTarget={document.body}
                     styles={{
-                      menu: (base) => ({ ...base, zIndex: 11 }),
                       container: (base) => ({ ...base, width: '100%' }),
-                      valueContainer: (base) => ({ ...base, paddingLeft: '10px' }),
-                      menuPortal: (base) => ({ ...base, zIndex: 9999 })
+                      valueContainer: (base) => ({ ...base, paddingLeft: '10px' })
                     }}
                   />
                 )}