From 4b77faf98bf54ff9fda3cf0fce21eabb8b288b77 Mon Sep 17 00:00:00 2001
From: IRBorisov <8611739+IRBorisov@users.noreply.github.com>
Date: Wed, 29 Nov 2023 13:07:55 +0300
Subject: [PATCH] Use portaling for react-select

---
 .../src/components/Common/SelectMulti.tsx     | 21 +++++++++++--------
 .../src/components/Common/SelectSingle.tsx    | 17 +++++++++------
 .../ConstituentaTab.tsx                       |  4 ++--
 .../DlgEditReference/DlgEditReference.tsx     |  2 +-
 .../frontend/src/dialogs/DlgEditWordForms.tsx |  2 +-
 .../frontend/src/dialogs/DlgRenameCst.tsx     |  2 +-
 6 files changed, 28 insertions(+), 20 deletions(-)

diff --git a/rsconcept/frontend/src/components/Common/SelectMulti.tsx b/rsconcept/frontend/src/components/Common/SelectMulti.tsx
index 93a500ce..1469a8dc 100644
--- a/rsconcept/frontend/src/components/Common/SelectMulti.tsx
+++ b/rsconcept/frontend/src/components/Common/SelectMulti.tsx
@@ -8,13 +8,13 @@ interface SelectMultiProps<
   Option,
   Group extends GroupBase<Option> = GroupBase<Option>
 >
-extends Omit<Props<Option, true, Group>, 'theme'> {
+extends Omit<Props<Option, true, Group>, 'theme' | 'menuPortalTarget'> {
+  noPortal?: boolean
 }
 
-function SelectMulti<
-  Option,
-  Group extends GroupBase<Option> = GroupBase<Option>
-> (props: SelectMultiProps<Option, Group>) {
+function SelectMulti<Option, Group extends GroupBase<Option> = GroupBase<Option>> ({
+  noPortal, ...restProps
+}: SelectMultiProps<Option, Group>) {
   const { darkMode, colors } = useConceptTheme();
   const themeColors = useMemo(
     () => !darkMode ? selectLightT : selectDarkT
@@ -27,7 +27,6 @@ function SelectMulti<
       borderRadius: '0.25rem',
       cursor: isDisabled ? 'not-allowed' : 'pointer'
     }),
-
     option: (styles, { isSelected }) => ({
       ...styles,
       backgroundColor: isSelected ? colors.bgSelected : styles.backgroundColor,
@@ -35,6 +34,10 @@ function SelectMulti<
       borderWidth: '1px',
       borderColor: colors.border
     }),
+    menuPortal: (styles) => ({
+      ...styles,
+      zIndex: 9999
+    }),
     menuList: (styles) => ({
       ...styles,
       padding: '0px'
@@ -50,7 +53,7 @@ function SelectMulti<
   }), [colors]);
 
   return (
-    <Select
+    <Select isMulti
       noOptionsMessage={() => 'Список пуст'}
       theme={theme => ({
         ...theme,
@@ -60,9 +63,9 @@ function SelectMulti<
           ...themeColors
         },
       })}
-      isMulti
+      menuPortalTarget={!noPortal ? document.body : null}
       styles={adjustedStyles}
-      {...props}
+      {...restProps}
     />
   );
 }
diff --git a/rsconcept/frontend/src/components/Common/SelectSingle.tsx b/rsconcept/frontend/src/components/Common/SelectSingle.tsx
index 52078df8..26a54f06 100644
--- a/rsconcept/frontend/src/components/Common/SelectSingle.tsx
+++ b/rsconcept/frontend/src/components/Common/SelectSingle.tsx
@@ -8,13 +8,13 @@ interface SelectSingleProps<
   Option,
   Group extends GroupBase<Option> = GroupBase<Option>
 >
-extends Omit<Props<Option, false, Group>, 'theme'> {
+extends Omit<Props<Option, false, Group>, 'theme' | 'menuPortalTarget'> {
+  noPortal?: boolean
 }
 
-function SelectSingle<
-  Option,
-  Group extends GroupBase<Option> = GroupBase<Option>
-> (props: SelectSingleProps<Option, Group>) {
+function SelectSingle<Option, Group extends GroupBase<Option> = GroupBase<Option>> ({
+  noPortal, ...restProps
+}: SelectSingleProps<Option, Group>) {
   const { darkMode, colors } = useConceptTheme();
   const themeColors = useMemo(
     () => !darkMode ? selectLightT : selectDarkT
@@ -27,6 +27,10 @@ function SelectSingle<
       borderRadius: '0.25rem',
       cursor: isDisabled ? 'not-allowed' : 'pointer'
     }),
+    menuPortal: (styles) => ({
+      ...styles,
+      zIndex: 9999
+    }),
     menuList: (styles) => ({
       ...styles,
       padding: '0px'
@@ -54,8 +58,9 @@ function SelectSingle<
           ...themeColors
         },
       })}
+      menuPortalTarget={!noPortal ? document.body : null}
       styles={adjustedStyles}
-      {...props}
+      {...restProps}
     />
   );
 }
diff --git a/rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/ConstituentaTab.tsx b/rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/ConstituentaTab.tsx
index c1a1ac33..58470c54 100644
--- a/rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/ConstituentaTab.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/ConstituentaTab.tsx
@@ -16,9 +16,9 @@ interface ConstituentaTabProps {
 function ConstituentaTab({state, partialUpdate}: ConstituentaTabProps) {
   return (
   <div className='flex flex-col gap-3'>
-    <div className='flex justify-center w-full gap-6'>
+    <div className='flex justify-center w-full gap-3 pr-2'>
       <SelectSingle
-        className='min-w-[15rem] self-center'
+        className='min-w-[14rem] self-center'
         options={SelectorCstType}
         placeholder='Выберите тип'
         value={{ value: state.cst_type, label: labelCstType(state.cst_type) }}
diff --git a/rsconcept/frontend/src/dialogs/DlgEditReference/DlgEditReference.tsx b/rsconcept/frontend/src/dialogs/DlgEditReference/DlgEditReference.tsx
index 0e83a422..cca365fa 100644
--- a/rsconcept/frontend/src/dialogs/DlgEditReference/DlgEditReference.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgEditReference/DlgEditReference.tsx
@@ -249,7 +249,7 @@ function DlgEditReference({ hideWindow, items, initial, onSave }: DlgEditReferen
         <Label text='Отсылаемая словоформа'/>
         <SelectMulti
           placeholder='Выберите граммемы'
-          className='flex-grow h-full z-modal-top'
+          className='flex-grow h-full'
           menuPlacement='top'
           options={gramOptions}
           value={selectedGrams}
diff --git a/rsconcept/frontend/src/dialogs/DlgEditWordForms.tsx b/rsconcept/frontend/src/dialogs/DlgEditWordForms.tsx
index eb4978f9..8ed3e87f 100644
--- a/rsconcept/frontend/src/dialogs/DlgEditWordForms.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgEditWordForms.tsx
@@ -269,7 +269,7 @@ function DlgEditWordForms({ hideWindow, target, onSave }: DlgEditWordFormsProps)
         />
       </div>
       <SelectMulti
-        className='z-modal-top min-w-[20rem] max-w-[20rem] h-full flex-grow'
+        className='min-w-[20rem] max-w-[20rem] h-full flex-grow'
         options={options}
         placeholder='Выберите граммемы'
         
diff --git a/rsconcept/frontend/src/dialogs/DlgRenameCst.tsx b/rsconcept/frontend/src/dialogs/DlgRenameCst.tsx
index 9fb50013..752c0d70 100644
--- a/rsconcept/frontend/src/dialogs/DlgRenameCst.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgRenameCst.tsx
@@ -51,7 +51,7 @@ function DlgRenameCst({ hideWindow, initial, onRename }: DlgRenameCstProps) {
       <div className='flex items-center gap-4 px-2 my-2 h-fit min-w-[25rem]'>
         <SelectSingle
           placeholder='Выберите тип'
-          className='min-w-[14rem] self-center z-modal-top'
+          className='min-w-[14rem] self-center'
           options={SelectorCstType}
           value={{
             value: cstData.cst_type,