Skip to content

chore: upgrade React to 19 and React Router to 8 #9530

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
sriramveeraghanta wants to merge 4 commits into
base: preview
Choose a base branch
from
Open

chore: upgrade React to 19 and React Router to 8 #9530

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d6d7b9f
chore(deps): upgrade @headlessui/react to v2
sriramveeraghanta Aug 2, 2026
b1947f5
chore(deps): remove React-19-hostile dependencies
sriramveeraghanta Aug 2, 2026
5c1cba7
feat(deps): upgrade React to 19.2.8
sriramveeraghanta Aug 2, 2026
f6124ad
feat(deps): upgrade React Router to 8.3.0
sriramveeraghanta Aug 2, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .github/workflows/check-version.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,8 @@ jobs:

- name: Setup Node.js
uses: actions/setup-node@v6
with:
node-version-file: .node-version

- name: Get PR Branch version
run: echo "PR_VERSION=$(node -p "require('./package.json').version")" >> $GITHUB_ENV
Expand Down
2 changes: 1 addition & 1 deletion .github/workflows/i18n-sync-check.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ jobs:
- name: Set up Node.js
uses: actions/setup-node@v6
with:
node-version: "22.18.0"
node-version: "22.22.0"

- name: Enable Corepack and pnpm
run: corepack enable pnpm
Expand Down
8 changes: 8 additions & 0 deletions .github/workflows/pull-request-build-lint-web-apps.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,8 @@ jobs:

- name: Set up Node.js
uses: actions/setup-node@v6
with:
node-version-file: .node-version

- name: Enable Corepack and pnpm
run: corepack enable pnpm
Expand Down Expand Up @@ -78,6 +80,8 @@ jobs:

- name: Set up Node.js
uses: actions/setup-node@v6
with:
node-version-file: .node-version

- name: Enable Corepack and pnpm
run: corepack enable pnpm
Expand Down Expand Up @@ -135,6 +139,8 @@ jobs:

- name: Set up Node.js
uses: actions/setup-node@v6
with:
node-version-file: .node-version

- name: Enable Corepack and pnpm
run: corepack enable pnpm
Expand Down Expand Up @@ -176,6 +182,8 @@ jobs:

- name: Set up Node.js
uses: actions/setup-node@v6
with:
node-version-file: .node-version

- name: Enable Corepack and pnpm
run: corepack enable pnpm
Expand Down
2 changes: 1 addition & 1 deletion .mise.toml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
[tools]
node = "22.18.0"
node = "22.22.0"
1 change: 1 addition & 0 deletions .node-version
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
22.22.0
2 changes: 1 addition & 1 deletion .oxlintrc.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
},
"settings": {
"react": {
"version": "18.3"
"version": "19.0"
},
"jsx-a11y": {
"polymorphicPropName": "as"
Expand Down
2 changes: 1 addition & 1 deletion apps/admin/app/(all)/(dashboard)/sidebar-help-section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,9 +91,9 @@ export const AdminSidebarHelpSection = observer(function AdminSidebarHelpSection
</button>
</Tooltip>
</div>

<div className="relative">
<Transition
as="div"
show={isNeedHelpOpen}
enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95"
Expand Down
13 changes: 8 additions & 5 deletions apps/admin/components/common/controller-input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,19 @@
*/

import React, { useState } from "react";
import type { Control } from "react-hook-form";
import type { Control, FieldPath, FieldValues } from "react-hook-form";
import { Controller } from "react-hook-form";
// icons
import { Eye, EyeOff } from "lucide-react";
// plane internal packages
import { Input } from "@plane/ui";
import { cn } from "@plane/utils";

type Props = {
control: Control<any>;
// Generic over the form's values because react-hook-form's Control is invariant: its
// `_options.validate` narrows `name` to a keyof union, so `Control<any>` no longer
// accepts a typed form's control. Inferring from `control` keeps call sites unchanged.
type Props<TFieldValues extends FieldValues = FieldValues> = {
control: Control<TFieldValues>;
type: "text" | "password";
name: string;
Comment on lines +19 to 22

@coderabbitai coderabbitai Bot Aug 3, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "== locate file =="
fd -a 'controller-input\.tsx$' . || true

echo "== file context =="
FILE="$(fd 'controller-input\.tsx$' . | head -n 1)"
if [ -n "${FILE:-}" ]; then
  wc -l "$FILE"
  cat -n "$FILE"
fi

echo "== package/react-hook-form refs =="
rg -n "\"react-hook-form\"|from ['\"]react-hook-form['\"]|FieldPath<'|FieldValues" -S --glob '*.{json,ts,tsx,js,jsx}' package.json pnpm-lock.yaml apps packages 2>/dev/null | head -n 200

Repository: makeplane/plane

Length of output: 19539

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "== check controller switch pattern =="
SWITCH="$(fd 'controller-switch\.tsx$' . | head -n 1)"
if [ -n "${SWITCH:-}" ]; then
  wc -l "$SWITCH"
  cat -n "$SWITCH"
fi

echo "== react-hook-form FieldPath type definition in installed package/types =="
python3 - <<'PY'
try:
    import subprocess, json
    r = subprocess.run(["npm", "view", "react-hook-form", "version", "--json"], capture_output=True, text=True, check=True)
    versions = json.loads(r.stdout.strip())
    print("react-hook-form versions:", versions)
except Exception as e:
    print("npm view failed:", e)

from pathlib import Path
for p in list(Path("node_modules/react-hook-form").glob("**/*.d.ts"))[:10]:
    if "field-path" in p.as_posix().lower() or "useform" in p.as_posix().lower() or p.name == "index.d.ts":
        print(p)
PY

Repository: makeplane/plane

Length of output: 2089

🌐 Web query:

react-hook-form React Hook Fields FieldPath FieldValues Controller name generic

💡 Result:

In React Hook Form, the Controller component (and the useController hook) utilizes TypeScript generics to ensure type safety for form fields, particularly when connecting custom components to the form state [1][2][3]. Key Generics and Types: 1. TFieldValues: This generic represents the shape of your entire form data object. It must extend FieldValues (which is essentially a Record<string, any>) [2][4]. When you provide this type, it enables the library to infer the available paths for the name prop [3][5]. 2. TName: This generic represents the path to a specific field within TFieldValues [2][4]. It is constrained by the FieldPath type, which uses TypeScript's template literal types to validate that the name string provided to the Controller actually exists within your form data structure [4][5]. 3. ControllerProps and useController: Both accept these generics to maintain consistency [2][6]. When you use <Controller<FormValues, "fieldName"> />, TypeScript will restrict the name prop to valid keys within FormValues and ensure the value returned in the render prop matches the type defined at that path (via FieldPathValue<TFieldValues, TName>) [2][4]. Example Usage: type FormValues = { firstName: string; age: number; }; // Using Controller with generics <Controller<FormValues, "firstName"> name="firstName" control={control} render={({ field }) => <input {...field} />} /> In this example, the "name" prop is strictly typed to "firstName" or "age", and the "field.value" property is correctly inferred as a string [2][4]. If you omit the explicit generic arguments, React Hook Form often infers them automatically from the control object provided [1][7][3]. Top Results: [1], [2], [3]

Citations:

🌐 Web query:

FieldPath<TFieldValues> react-hook-form 7 FieldPath generic definition

💡 Result:

In React Hook Form 7, FieldPath is a TypeScript generic type that represents a union of all valid dot-notation string paths for a given form data structure [1][2]. The type is defined as an alias for the Path utility type [1][3]: export type FieldPath = Path; Key characteristics of FieldPath: 1. Type Safety: It enables compile-time validation of field names, ensuring that string identifiers provided to functions like register, control, or watch correspond to existing properties within your form's data object [1][2]. 2. Deep Nesting: It recursively traverses the TFieldValues structure to generate all possible paths, including support for nested objects and array indices (e.g., 'user.name' or 'items.0.id') [2]. 3. Integration: It is used throughout the React Hook Form API to provide auto-completion and type checking for the name prop of form inputs and other field-related identifiers [1]. Associated utility types often used with FieldPath include: - FieldPathValue<TFieldValues, TFieldPath>: Determines the specific TypeScript type of the value located at a given path [4][3][2]. - FieldPathValues<TFieldValues, TPath>: Maps an array of paths to a tuple of their corresponding value types [4][3][2]. - FieldPathByValue<TFieldValues, TValue>: Filters paths to include only those whose values match a specific type [4][5][2].

Citations:

Preserve the name type constraint.

name: string accepts paths outside TFieldValues. Declare name as FieldPath<TFieldValues> and pass it directly to Controller to avoid the cast.

Proposed fix 
-  name: string;
+  name: FieldPath<TFieldValues>;
...
-          name={name as FieldPath<TFieldValues>}
+          name={name}
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
type Props<TFieldValues extends FieldValues = FieldValues> = {
control: Control<TFieldValues>;
type: "text" | "password";
name: string;
type Props<TFieldValues extends FieldValues = FieldValues> = {
control: Control<TFieldValues>;
type: "text" | "password";
name: FieldPath<TFieldValues>;
// ...
name={name}
🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@apps/admin/components/common/controller-input.tsx` around lines 19 - 22,
Update the Props type’s name field to use FieldPath<TFieldValues> instead of
string, and pass name directly to the Controller in the component without
casting. Ensure the required FieldPath type is imported while preserving the
existing TFieldValues relationship.

Source: Coding guidelines

label: string;
Expand All @@ -34,7 +37,7 @@ export type TControllerInputFormField = {
required: boolean;
};

export function ControllerInput(props: Props) {
export function ControllerInput<TFieldValues extends FieldValues = FieldValues>(props: Props<TFieldValues>) {
const { name, control, type, label, description, placeholder, error, required } = props;
// states
const [showPassword, setShowPassword] = useState(false);
Expand All @@ -45,7 +48,7 @@ export function ControllerInput(props: Props) {
<div className="relative">
<Controller
control={control}
name={name}
name={name as FieldPath<TFieldValues>}
rules={{ required: required ? `${label} is required.` : false }}
render={({ field: { value, onChange, ref } }) => (
<Input
Expand Down
6 changes: 5 additions & 1 deletion apps/space/components/issues/peek-overview/header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,10 +92,14 @@ export const PeekOverviewHeader = observer(function PeekOverviewHeader(props: Pr
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Listbox.Options className="shadow-lg absolute left-0 z-10 mt-1 min-w-[12rem] origin-top-left overflow-y-auto rounded-md border border-strong bg-surface-2 text-11 whitespace-nowrap focus:outline-none">
<Listbox.Options
as="ul"
className="shadow-lg absolute left-0 z-10 mt-1 min-w-[12rem] origin-top-left overflow-y-auto rounded-md border border-strong bg-surface-2 text-11 whitespace-nowrap focus:outline-none"
>
<div className="space-y-1 p-2">
{PEEK_MODES.map((mode) => (
<Listbox.Option
as="li"
key={mode.key}
value={mode.key}
className={({ active, selected }) =>
Expand Down
2 changes: 1 addition & 1 deletion apps/space/hooks/use-mention.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export const useMention = () => {
const userService = new UserService();
const { data: user, isLoading: userDataLoading } = useSWR("currentUser", async () => userService.me());

const userRef = useRef<IUser | undefined>();
const userRef = useRef<IUser | undefined>(undefined);

useEffect(() => {
if (userRef) {
Expand Down
2 changes: 1 addition & 1 deletion apps/web/app/(all)/[workspaceSlug]/(projects)/extended-sidebar-wrapper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import useExtendedSidebarOutsideClickDetector from "@/hooks/use-extended-sidebar
type Props = {
className?: string;
children: React.ReactNode;
extendedSidebarRef: React.RefObject<HTMLDivElement>;
extendedSidebarRef: React.RefObject<HTMLDivElement | null>;
isExtendedSidebarOpened: boolean;
handleClose: () => void;
excludedElementId: string;
Expand Down
2 changes: 1 addition & 1 deletion apps/web/core/components/base-layouts/gantt/sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ type Props<T extends IBaseLayoutsBaseItem> = {
blockUpdateHandler: (block: T, payload: IBlockUpdateData) => void;
canLoadMoreBlocks?: boolean;
loadMoreItems?: (groupId: string) => void;
ganttContainerRef: RefObject<HTMLDivElement>;
ganttContainerRef: RefObject<HTMLDivElement | null>;
blockIds: string[];
enableReorder: boolean;
showAllBlocks?: boolean;
Expand Down
2 changes: 1 addition & 1 deletion apps/web/core/components/comments/card/display.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ export type TCommentCardDisplayProps = {
disabled: boolean;
entityId: string;
projectId?: string;
readOnlyEditorRef: React.RefObject<EditorRefApi>;
readOnlyEditorRef: React.RefObject<EditorRefApi | null>;
showAccessSpecifier: boolean;
workspaceId: string;
workspaceSlug: string;
Expand Down
2 changes: 2 additions & 0 deletions apps/web/core/components/common/quick-actions-helper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@
* See the LICENSE file for details.
*/

// @types/react 19 removed the global JSX namespace; it is imported from react now.
import type { JSX } from "react";
// types
import type { ICycle, IModule, IProjectView, IWorkspaceView } from "@plane/types";
import type { TContextMenuItem } from "@plane/ui";
Expand Down
18 changes: 12 additions & 6 deletions apps/web/core/components/core/image-picker-popover.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import React, { useState, useRef, useCallback, useMemo } from "react";
import { observer } from "mobx-react";
import { useParams } from "next/navigation";
import { useDropzone } from "react-dropzone";
import type { Control } from "react-hook-form";
import type { Control, FieldPath, FieldValues } from "react-hook-form";
import { Controller } from "react-hook-form";
import useSWR from "swr";
import { Popover } from "@headlessui/react";
Expand All @@ -34,10 +34,13 @@ type TTabOption = {
isEnabled: boolean;
};

type Props = {
// Generic over the form's values because react-hook-form's Control is invariant: its
// `_options.validate` narrows `name` to a keyof union, so `Control<any>` no longer
// accepts a typed form's control. Inferring from `control` keeps call sites unchanged.
type Props<TFieldValues extends FieldValues = FieldValues> = {
label: string | React.ReactNode;
value: string | null;
control: Control<any>;
control: Control<TFieldValues>;
onChange: (data: string) => void;
disabled?: boolean;
tabIndex?: number;
Expand All @@ -48,7 +51,7 @@ type Props = {
// services
const fileService = new FileService();

export const ImagePickerPopover = observer(function ImagePickerPopover(props: Props) {
function ImagePickerPopoverComponent<TFieldValues extends FieldValues = FieldValues>(props: Props<TFieldValues>) {

@github-actions github-actions Bot Aug 3, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

React Doctor · react-doctor/no-giant-component (warning)

Component "ImagePickerPopoverComponent" is over 300 lines long, which is hard to read & change. Split it into a few smaller components.

Fix → Pull each section into its own component so the parent is easier to read, test, and change.

Docs

const { label, value, control, onChange, disabled = false, tabIndex, isProfileCover = false, projectId } = props;
// states
const [image, setImage] = useState<File | null>(null);
Expand Down Expand Up @@ -218,7 +221,7 @@ export const ImagePickerPopover = observer(function ImagePickerPopover(props: Pr
<div className="flex items-center gap-x-2">
<Controller
control={control}
name="search"
name={"search" as FieldPath<TFieldValues>}
render={({ field: { value, ref } }) => (
<Input
id="search"
Expand Down Expand Up @@ -372,4 +375,7 @@ export const ImagePickerPopover = observer(function ImagePickerPopover(props: Pr
)}
</Popover>
);
});
}

// observer() erases the generic signature, so restore it with a cast.
export const ImagePickerPopover = observer(ImagePickerPopoverComponent) as typeof ImagePickerPopoverComponent;
2 changes: 1 addition & 1 deletion apps/web/core/components/core/list/list-item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ interface IListItemProps {
appendTitleElement?: React.ReactNode;
actionableItems?: React.ReactNode;
isMobile?: boolean;
parentRef: React.RefObject<HTMLDivElement>;
parentRef: React.RefObject<HTMLDivElement | null>;
disableLink?: boolean;
className?: string;
itemClassName?: string;
Expand Down
5 changes: 3 additions & 2 deletions apps/web/core/components/core/modals/bulk-delete-issues-modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -159,7 +159,8 @@ export const BulkDeleteIssuesModal = observer(function BulkDeleteIssuesModal(pro
<ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.CENTER} width={EModalWidth.XXL}>
<form>
<Combobox
onChange={(val: string) => {
onChange={(val: string | null) => {
if (val === null) return;
const selectedIssues = watch("delete_issue_ids");
if (selectedIssues.includes(val))
setValue(
Expand All @@ -182,7 +183,7 @@ export const BulkDeleteIssuesModal = observer(function BulkDeleteIssuesModal(pro
/>
</div>

<Combobox.Options static className="max-h-80 scroll-py-2 divide-y divide-subtle-1 overflow-y-auto">
<Combobox.Options as="ul" static className="max-h-80 scroll-py-2 divide-y divide-subtle-1 overflow-y-auto">
{isSearching ? (
<Loader className="space-y-3 p-3">
<Loader.Item height="40px" />
Expand Down
9 changes: 7 additions & 2 deletions apps/web/core/components/core/modals/existing-issues-list-modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -139,7 +139,8 @@ export function ExistingIssuesListModal(props: Props) {
<ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.CENTER} width={EModalWidth.XXL}>
<Combobox
as="div"
onChange={(val: ISearchIssueResponse) => {
onChange={(val: ISearchIssueResponse | null) => {
if (val === null) return;
if (selectedIssues.some((i) => i.id === val.id))
setSelectedIssues((prevData) => prevData.filter((i) => i.id !== val.id));
else setSelectedIssues((prevData) => [...prevData, val]);
Expand Down Expand Up @@ -210,7 +211,11 @@ export function ExistingIssuesListModal(props: Props) {
)}
</div>

<Combobox.Options static className="vertical-scrollbar scrollbar-md max-h-80 scroll-py-2 overflow-y-auto">
<Combobox.Options
as="ul"
static
className="vertical-scrollbar scrollbar-md max-h-80 scroll-py-2 overflow-y-auto"
>
{/* TODO: Translate here */}
{searchTerm !== "" && (
<h5 className="mx-2 text-13 text-secondary">
Expand Down
3 changes: 2 additions & 1 deletion apps/web/core/components/core/render-if-visible-HOC.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,8 @@ type Props = {
horizontalOffset?: number;
root?: MutableRefObject<HTMLElement | null>;
children: ReactNode;
as?: keyof JSX.IntrinsicElements;
// @types/react 19 removed the global JSX namespace; it now lives under React.
as?: keyof React.JSX.IntrinsicElements;
classNames?: string;
placeholderChildren?: ReactNode;
defaultValue?: boolean;
Expand Down
2 changes: 1 addition & 1 deletion apps/web/core/components/cycles/analytics-sidebar/issue-progress.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,7 @@ export const CycleAnalyticsProgress = observer(function CycleAnalyticsProgress(p
<div className="text-13 font-medium text-secondary">{t("project_cycles.active_cycle.progress")}</div>
</div>
)}
<Transition show={open}>
<Transition as="div" show={open}>
<Disclosure.Panel className="flex flex-col divide-y divide-subtle-1">
{cycleStartDate && cycleEndDate ? (
<>
Expand Down
3 changes: 2 additions & 1 deletion apps/web/core/components/cycles/analytics-sidebar/progress-stats.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { Fragment } from "react";
/**
* Copyright (c) 2023-present Plane Software, Inc. and contributors
* SPDX-License-Identifier: AGPL-3.0-only
Expand Down Expand Up @@ -121,7 +122,7 @@ export const CycleProgressStats = observer(function CycleProgressStats(props: TC

return (
<div>
<Tab.Group defaultIndex={currentTabIndex(currentTab ? currentTab : "stat-assignees")}>
<Tab.Group as={Fragment} defaultIndex={currentTabIndex(currentTab ? currentTab : "stat-assignees")}>
<Tab.List
as="div"
className={cn(
Expand Down
2 changes: 1 addition & 1 deletion apps/web/core/components/cycles/list/cycle-list-item-action.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ type Props = {
projectId: string;
cycleId: string;
cycleDetails: ICycle;
parentRef: React.RefObject<HTMLDivElement>;
parentRef: React.RefObject<HTMLDivElement | null>;
isActive?: boolean;
};

Expand Down
2 changes: 1 addition & 1 deletion apps/web/core/components/cycles/quick-actions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ import { CycleDeleteModal } from "./delete-modal";
import { CycleCreateUpdateModal } from "./modal";

type Props = {
parentRef: React.RefObject<HTMLElement>;
parentRef: React.RefObject<HTMLElement | null>;
cycleId: string;
projectId: string;
workspaceSlug: string;
Expand Down
3 changes: 2 additions & 1 deletion apps/web/core/components/dropdowns/cycle/cycle-options.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,7 @@ export const CycleOptions = observer(function CycleOptions(props: CycleOptionsPr
query === "" ? options : options?.filter((o) => o.query.toLowerCase().includes(query.toLowerCase()));

return (
<Combobox.Options className="fixed z-10" static>
<Combobox.Options as="ul" className="fixed z-10" static>
<div
className="my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-raised-200 focus:outline-none"
ref={setPopperElement}
Expand All @@ -149,6 +149,7 @@ export const CycleOptions = observer(function CycleOptions(props: CycleOptionsPr
filteredOptions.length > 0 ? (
filteredOptions.map((option) => (
<Combobox.Option
as="li"
key={option.value}
value={option.value}
className={({ active, selected }) =>
Expand Down
2 changes: 1 addition & 1 deletion apps/web/core/components/dropdowns/date-range.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -261,7 +261,7 @@ export const DateRangeDropdown = observer(function DateRangeDropdown(props: Prop
);

const comboOptions = (
<Combobox.Options data-prevent-outside-click static>
<Combobox.Options as="ul" data-prevent-outside-click static>
<div
className="z-30 my-1 overflow-hidden rounded-md border-[0.5px] border-subtle-1 bg-surface-1"
ref={setPopperElement}
Expand Down
2 changes: 1 addition & 1 deletion apps/web/core/components/dropdowns/date.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -181,7 +181,7 @@ export const DateDropdown = observer(function DateDropdown(props: Props) {
>
{isOpen &&
createPortal(
<Combobox.Options data-prevent-outside-click static>
<Combobox.Options as="ul" data-prevent-outside-click static>
<div
className={cn(
"z-30 my-1 overflow-hidden rounded-md border-[0.5px] border-strong bg-surface-1 shadow-raised-200",
Expand Down
4 changes: 2 additions & 2 deletions apps/web/core/components/dropdowns/estimate.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -232,7 +232,7 @@ export const EstimateDropdown = observer(function EstimateDropdown(props: Props)
renderByDefault={renderByDefault}
>
{isOpen && (
<Combobox.Options className="fixed z-10" static>
<Combobox.Options as="ul" className="fixed z-10" static>
<div
className="my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-raised-200 focus:outline-none"
ref={setPopperElement}
Expand Down Expand Up @@ -268,7 +268,7 @@ export const EstimateDropdown = observer(function EstimateDropdown(props: Props)
{filteredOptions ? (
filteredOptions.length > 0 ? (
filteredOptions.map((option) => (
<Combobox.Option key={option.value} value={option.value}>
<Combobox.Option as="li" key={option.value} value={option.value}>
{({ active, selected }) => (
<div
className={cn(
Expand Down
2 changes: 1 addition & 1 deletion apps/web/core/components/dropdowns/intake-state/base.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -215,7 +215,7 @@ export const WorkItemStateDropdownBase = observer(function WorkItemStateDropdown
renderByDefault={renderByDefault}
>
{isOpen && (
<Combobox.Options className="fixed z-10" static>
<Combobox.Options as="ul" className="fixed z-10" static>
<div
className="my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-raised-200 focus:outline-none"
ref={setPopperElement}
Expand Down
Loading
Loading