[WEB-823] fix: quick add flicker and dropdown placement in calendar layout (#4054)

* chore: placement prop added in quick action menu

* fix: calenar layout quick action menu placement

* fix: calendar quick add flicker

web/components/issues/issue-layouts/calendar/base-calendar-root.tsx

@@ -89,7 +89,7 @@ export const BaseCalendarRoot = observer((props: IBaseCalendarRoot) => {
             groupedIssueIds={groupedIssueIds}
             layout={displayFilters?.calendar?.layout}
             showWeekends={displayFilters?.calendar?.show_weekends ?? false}
-            quickActions={(issue, customActionButton) => (
+            quickActions={(issue, customActionButton, placement) => (
               <QuickActions
                 customActionButton={customActionButton}
                 issue={issue}
@@ -101,6 +101,7 @@ export const BaseCalendarRoot = observer((props: IBaseCalendarRoot) => {
                 handleArchive={async () => archiveIssue && archiveIssue(issue.project_id, issue.id)}
                 handleRestore={async () => restoreIssue && restoreIssue(issue.project_id, issue.id)}
                 readOnly={!isEditingAllowed || isCompletedCycle}
+                placements={placement}
               />
             )}
             addIssuesToView={addIssuesToView}

web/components/issues/issue-layouts/calendar/calendar.tsx

@@ -1,4 +1,5 @@
 import { useState } from "react";
+import { Placement } from "@popperjs/core";
 import { observer } from "mobx-react-lite";
 import type {
   IIssueDisplayFilterOptions,
@@ -37,7 +38,7 @@ type Props = {
   groupedIssueIds: TGroupedIssues;
   layout: "month" | "week" | undefined;
   showWeekends: boolean;
-  quickActions: (issue: TIssue, customActionButton?: React.ReactElement) => React.ReactNode;
+  quickActions: (issue: TIssue, customActionButton?: React.ReactElement, placement?: Placement) => React.ReactNode;
   quickAddCallback?: (
     workspaceSlug: string,
     projectId: string,

web/components/issues/issue-layouts/calendar/day-tile.tsx

@@ -1,4 +1,5 @@
 import { Droppable } from "@hello-pangea/dnd";
+import { Placement } from "@popperjs/core";
 import { observer } from "mobx-react-lite";
 import { TGroupedIssues, TIssue, TIssueMap } from "@plane/types";
 // components
@@ -19,7 +20,7 @@ type Props = {
   date: ICalendarDate;
   issues: TIssueMap | undefined;
   groupedIssueIds: TGroupedIssues;
-  quickActions: (issue: TIssue, customActionButton?: React.ReactElement) => React.ReactNode;
+  quickActions: (issue: TIssue, customActionButton?: React.ReactElement, placement?: Placement) => React.ReactNode;
   enableQuickIssueCreate?: boolean;
   disableIssueCreation?: boolean;
   quickAddCallback?: (

web/components/issues/issue-layouts/calendar/issue-block-root.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { Placement } from "@popperjs/core";
 // components
 import { TIssue, TIssueMap } from "@plane/types";
 import { CalendarIssueBlock } from "@/components/issues";
@@ -7,7 +8,7 @@ import { CalendarIssueBlock } from "@/components/issues";
 type Props = {
   issues: TIssueMap | undefined;
   issueId: string;
-  quickActions: (issue: TIssue, customActionButton?: React.ReactElement) => React.ReactNode;
+  quickActions: (issue: TIssue, customActionButton?: React.ReactElement, placement?: Placement) => React.ReactNode;
   isDragging?: boolean;
 };
 

web/components/issues/issue-layouts/calendar/issue-block.tsx

@@ -1,4 +1,5 @@
 import { useState, useRef } from "react";
+import { Placement } from "@popperjs/core";
 import { observer } from "mobx-react";
 import { MoreHorizontal } from "lucide-react";
 import { TIssue } from "@plane/types";
@@ -14,7 +15,7 @@ import { usePlatformOS } from "@/hooks/use-platform-os";
 
 type Props = {
   issue: TIssue;
-  quickActions: (issue: TIssue, customActionButton?: React.ReactElement) => React.ReactNode;
+  quickActions: (issue: TIssue, customActionButton?: React.ReactElement, placement?: Placement) => React.ReactNode;
   isDragging?: boolean;
 };
 
@@ -56,6 +57,11 @@ export const CalendarIssueBlock: React.FC<Props> = observer((props) => {
     </div>
   );
 
+  const isMenuActionRefAboveScreenBottom =
+    menuActionRef?.current && menuActionRef?.current?.getBoundingClientRect().bottom < window.innerHeight - 220;
+
+  const placement = isMenuActionRefAboveScreenBottom ? "bottom-end" : "top-end";
+
   return (
     <ControlLink
       href={`/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`}
@@ -104,7 +110,7 @@ export const CalendarIssueBlock: React.FC<Props> = observer((props) => {
               e.stopPropagation();
             }}
           >
-            {quickActions(issue, customActionButton)}
+            {quickActions(issue, customActionButton, placement)}
           </div>
         </div>
       </>

web/components/issues/issue-layouts/calendar/issue-blocks.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
 import { Draggable } from "@hello-pangea/dnd";
+import { Placement } from "@popperjs/core";
 import { observer } from "mobx-react-lite";
 import { TIssue, TIssueMap } from "@plane/types";
 // components
@@ -12,7 +13,7 @@ type Props = {
   date: Date;
   issues: TIssueMap | undefined;
   issueIdList: string[] | null;
-  quickActions: (issue: TIssue, customActionButton?: React.ReactElement) => React.ReactNode;
+  quickActions: (issue: TIssue, customActionButton?: React.ReactElement, placement?: Placement) => React.ReactNode;
   isDragDisabled?: boolean;
   enableQuickIssueCreate?: boolean;
   disableIssueCreation?: boolean;

web/components/issues/issue-layouts/calendar/quick-add-issue-form.tsx

@@ -230,7 +230,7 @@ export const CalendarQuickAddIssueForm: React.FC<Props> = observer((props) => {
 
       {!isOpen && (
         <div
-          className={cn("md:hidden rounded md:border-[0.5px] border-custom-border-200 md:group-hover:block", {
+          className={cn("md:opacity-0 rounded md:border-[0.5px] border-custom-border-200 md:group-hover:opacity-100", {
             block: isMenuOpen,
           })}
         >

web/components/issues/issue-layouts/calendar/week-days.tsx

@@ -1,3 +1,4 @@
+import { Placement } from "@popperjs/core";
 import { observer } from "mobx-react-lite";
 import { TGroupedIssues, TIssue, TIssueMap } from "@plane/types";
 // components
@@ -16,7 +17,7 @@ type Props = {
   issues: TIssueMap | undefined;
   groupedIssueIds: TGroupedIssues;
   week: ICalendarWeek | undefined;
-  quickActions: (issue: TIssue, customActionButton?: React.ReactElement) => React.ReactNode;
+  quickActions: (issue: TIssue, customActionButton?: React.ReactElement, placement?: Placement) => React.ReactNode;
   enableQuickIssueCreate?: boolean;
   disableIssueCreation?: boolean;
   quickAddCallback?: (

web/components/issues/issue-layouts/list/list-view-types.d.ts

@@ -1,3 +1,4 @@
+import { Placement } from "@popperjs/core";
 import { TIssue } from "@plane/types";
 
 export interface IQuickActionProps {
@@ -10,4 +11,5 @@ export interface IQuickActionProps {
   customActionButton?: React.ReactElement;
   portalElement?: HTMLDivElement | null;
   readOnly?: boolean;
+  placements?: Placement;
 }

web/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx

@@ -31,6 +31,7 @@ export const CycleIssueQuickActions: React.FC<IQuickActionProps> = observer((pro
     customActionButton,
     portalElement,
     readOnly = false,
+    placements = "bottom-start",
   } = props;
   // states
   const [createUpdateIssueModal, setCreateUpdateIssueModal] = useState(false);
@@ -107,7 +108,7 @@ export const CycleIssueQuickActions: React.FC<IQuickActionProps> = observer((pro
       />
       <CustomMenu
         menuItemsClassName="z-[14]"
-        placement="bottom-start"
+        placement={placements}
         customButton={customActionButton}
         portalElement={portalElement}
         maxHeight="lg"

web/components/issues/issue-layouts/quick-action-dropdowns/module-issue.tsx

@@ -30,6 +30,7 @@ export const ModuleIssueQuickActions: React.FC<IQuickActionProps> = observer((pr
     customActionButton,
     portalElement,
     readOnly = false,
+    placements = "bottom-start",
   } = props;
   // states
   const [createUpdateIssueModal, setCreateUpdateIssueModal] = useState(false);
@@ -106,7 +107,7 @@ export const ModuleIssueQuickActions: React.FC<IQuickActionProps> = observer((pr
       />
       <CustomMenu
         menuItemsClassName="z-[14]"
-        placement="bottom-start"
+        placement={placements}
         customButton={customActionButton}
         portalElement={portalElement}
         maxHeight="lg"

web/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx

@@ -28,6 +28,7 @@ export const ProjectIssueQuickActions: React.FC<IQuickActionProps> = observer((p
     customActionButton,
     portalElement,
     readOnly = false,
+    placements = "bottom-start",
   } = props;
   // router
   const router = useRouter();
@@ -107,7 +108,7 @@ export const ProjectIssueQuickActions: React.FC<IQuickActionProps> = observer((p
       />
       <CustomMenu
         menuItemsClassName="z-[14]"
-        placement="bottom-start"
+        placement={placements}
         customButton={customActionButton}
         portalElement={portalElement}
         maxHeight="lg"