Merge pull request #3688 from LiteFarmOrg/LF-4732/White_Screen_Appear…

…s_When_Clicking_Three_Dots_Button_on_Animal_Profile_Page LF-4732: White screen appears when clicking three dots button on animal profile page
LiteFarmOrg · Feb 13, 2025 · 832945b · 832945b
2 parents 072e869 + 257d9b6
commit 832945b
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 7 deletions.
diff --git a/packages/webapp/src/components/Form/ContextForm/WithStepperProgressBar.tsx b/packages/webapp/src/components/Form/ContextForm/WithStepperProgressBar.tsx
@@ -192,7 +192,6 @@ export const WithStepperProgressBar = ({
 
   return (
     <StepperProgressBarWrapper
-      isSingleStep={isSingleStep}
       {...stepperProgressBarConfig}
       title={stepperProgressBarTitle}
       steps={steps.map(({ title }) => title)}
@@ -232,17 +231,15 @@ type HeaderProps = StepperProgressBarProps & {
 
 type StepperProgressBarWrapperProps = HeaderProps & {
   children: ReactNode;
-  isSingleStep: boolean;
   headerComponent: ((props: HeaderProps) => JSX.Element) | null;
 };
 
 const StepperProgressBarWrapper = ({
   children,
-  isSingleStep,
   headerComponent,
   ...stepperProgressBarProps
 }: StepperProgressBarWrapperProps) => {
-  if (isSingleStep && !headerComponent) {
+  if (!headerComponent) {
     return <>{children}</>;
   }
 

diff --git a/packages/webapp/src/components/Menu/MeatballsMenu/index.tsx b/packages/webapp/src/components/Menu/MeatballsMenu/index.tsx
@@ -15,7 +15,7 @@
 import { forwardRef, ReactNode } from 'react';
 import clsx from 'clsx';
 import { BsThreeDots } from 'react-icons/bs';
-import FloatingMenu, { FloatingMenuProps } from '../FloatingButtonMenu/FloatingMenu';
+import FloatingMenu from '../FloatingButtonMenu/FloatingMenu';
 import DropdownButton from '../../Form/DropDownButton';
 import styles from './styles.module.scss';
 
@@ -25,9 +25,21 @@ export type MeatballsMenuProps = {
   disabled: boolean;
 };
 
+interface MenuProps {
+  autoFocusItem: boolean;
+  id: string;
+  'aria-labelledby': string;
+  onCloseMenu: () => void;
+}
+
 const MeatballsMenu = ({ options, classes, disabled = false }: MeatballsMenuProps) => {
-  const Menu = forwardRef<HTMLUListElement, FloatingMenuProps>((menuProps, ref) => (
-    <FloatingMenu ref={ref} classes={{ menuItem: styles.menuItem }} {...menuProps} />
+  const Menu = forwardRef<HTMLUListElement, MenuProps>((menuProps, ref) => (
+    <FloatingMenu
+      ref={ref}
+      options={options}
+      classes={{ menuItem: styles.menuItem }}
+      {...menuProps}
+    />
   ));
   Menu.displayName = 'Menu';
 

diff --git a/packages/webapp/src/containers/Animals/SingleAnimalView/index.tsx b/packages/webapp/src/containers/Animals/SingleAnimalView/index.tsx
@@ -240,6 +240,7 @@ function SingleAnimalView({ isCompactSideMenu, history, match, location }: AddAn
             cancelModalTitle={t('ANIMAL.EDIT_ANIMAL_FLOW')}
             isEditing={isEditing}
             setIsEditing={setIsEditing}
+            headerComponent={null}
           />
         )}
         <RemoveAnimalsModal