Only conditional render modals content.

See reactjs/react-modal#808, you should not use conditional rendering on modal.
AndreWohnsland · Jan 6, 2025 · 269e2e8 · 269e2e8
1 parent d16f333
commit 269e2e8
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 28 deletions.
diff --git a/web_client/src/components/cocktail/CocktailList.tsx b/web_client/src/components/cocktail/CocktailList.tsx
@@ -82,17 +82,18 @@ const CocktailList: React.FC = () => {
         )}
       </div>
 
-      {selectedCocktail && (
-        <Modal
-          isOpen={!!selectedCocktail}
-          onRequestClose={handleCloseModal}
-          contentLabel='Cocktail Details'
-          className='modal'
-          overlayClassName='overlay z-20'
-        >
+      <Modal
+        isOpen={!!selectedCocktail}
+        onRequestClose={handleCloseModal}
+        contentLabel='Cocktail Details'
+        className='modal'
+        overlayClassName='overlay z-20'
+        preventScroll={true}
+      >
+        {selectedCocktail && (
           <CocktailSelection selectedCocktail={selectedCocktail} handleCloseModal={handleCloseModal} />
-        </Modal>
-      )}
+        )}
+      </Modal>
       <Modal isOpen={singleIngredientOpen} className='modal slim' overlayClassName='overlay z-20'>
         <SingleIngredientSelection onClose={() => setSingleIngredientOpen(false)} />
       </Modal>

diff --git a/web_client/src/components/ingredient/IngredientList.tsx b/web_client/src/components/ingredient/IngredientList.tsx
@@ -129,13 +129,13 @@ const IngredientList: React.FC = () => {
         ))}
       </div>
 
-      {selectedIngredient && (
-        <Modal
-          isOpen={!!selectedIngredient}
-          onRequestClose={closeModal}
-          className='modal'
-          overlayClassName='overlay z-20'
-        >
+      <Modal
+        isOpen={!!selectedIngredient}
+        onRequestClose={closeModal}
+        className='modal'
+        overlayClassName='overlay z-20'
+      >
+        {selectedIngredient && (
           <div className='px-4 rounded w-full h-full flex flex-col'>
             <div className='flex justify-between items-center mb-2'>
               <h2 className='text-xl font-bold text-secondary'>
@@ -244,8 +244,8 @@ const IngredientList: React.FC = () => {
               </button>
             </div>
           </div>
-        </Modal>
-      )}
+        )}
+      </Modal>
     </div>
   );
 };

diff --git a/web_client/src/components/recipe/RecipeList.tsx b/web_client/src/components/recipe/RecipeList.tsx
@@ -207,13 +207,8 @@ const RecipeList: React.FC = () => {
         ))}
       </div>
 
-      {selectedCocktail && (
-        <Modal
-          isOpen={!!selectedCocktail}
-          onRequestClose={closeModal}
-          className='modal'
-          overlayClassName='overlay z-20'
-        >
+      <Modal isOpen={!!selectedCocktail} onRequestClose={closeModal} className='modal' overlayClassName='overlay z-20'>
+        {selectedCocktail && (
           <div className='px-1 rounded w-full h-full flex flex-col'>
             <div className='flex justify-between items-center mb-2'>
               <h2 className='text-xl font-bold text-secondary'>{selectedCocktail.name || t('recipes.newRecipe')}</h2>
@@ -349,8 +344,8 @@ const RecipeList: React.FC = () => {
               </button>
             </div>
           </div>
-        </Modal>
-      )}
+        )}
+      </Modal>
     </div>
   );
 };