From a95401b1ca3d075ef284fbf72eec508e72234dc6 Mon Sep 17 00:00:00 2001 From: Dave Bauman Date: Wed, 26 Apr 2023 11:44:36 -0400 Subject: [PATCH] fix: Fix Select z-index issues --- .../components/insight-metadata-editor/insight-authors.tsx | 6 ++---- .../insight-metadata-editor/insight-metadata-editor.tsx | 5 ++--- .../components/insight-metadata-editor/insight-tags.tsx | 3 +-- .../components/insight-metadata-editor/insight-team.tsx | 3 +-- .../components/insights-settings/insights-settings.tsx | 5 ++--- .../components/profile-settings/profile-settings.tsx | 2 +- .../components/system-settings/system-settings.tsx | 5 ++--- 7 files changed, 11 insertions(+), 18 deletions(-) diff --git a/packages/frontend/src/pages/insight-editor/components/insight-metadata-editor/insight-authors.tsx b/packages/frontend/src/pages/insight-editor/components/insight-metadata-editor/insight-authors.tsx index 949ee5297..27d5be164 100644 --- a/packages/frontend/src/pages/insight-editor/components/insight-metadata-editor/insight-authors.tsx +++ b/packages/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/packages/frontend/src/pages/insight-editor/components/insight-metadata-editor/insight-metadata-editor.tsx b/packages/frontend/src/pages/insight-editor/components/insight-metadata-editor/insight-metadata-editor.tsx index 2fc00ccdb..34e6c3182 100644 --- a/packages/frontend/src/pages/insight-editor/components/insight-metadata-editor/insight-metadata-editor.tsx +++ b/packages/frontend/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/packages/frontend/src/pages/insight-editor/components/insight-metadata-editor/insight-tags.tsx b/packages/frontend/src/pages/insight-editor/components/insight-metadata-editor/insight-tags.tsx index 9875c4b53..2356cee3c 100644 --- a/packages/frontend/src/pages/insight-editor/components/insight-metadata-editor/insight-tags.tsx +++ b/packages/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/packages/frontend/src/pages/insight-editor/components/insight-metadata-editor/insight-team.tsx b/packages/frontend/src/pages/insight-editor/components/insight-metadata-editor/insight-team.tsx index ef3a590a2..49ddf50dd 100644 --- a/packages/frontend/src/pages/insight-editor/components/insight-metadata-editor/insight-team.tsx +++ b/packages/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 index e3f9bb1b6..2c8e983b7 100644 --- 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 index 1404b686c..15c4837da 100644 --- 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 index 4401d9d1c..3ea57071f 100644 --- 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' }) }} /> )}