<DropdownMenu.Content> type error

[Cleover]

Is it possible to fix this type error from showing up on all <DropdownMenu.Content> tags? While the app app still works with the error, its making things a bit painful as most of my files have an error showing.

[321paranoiawhy]

One possible thing can solve this may be change the code like this:

export type MenuContentProps = {
  children: React.ReactNode
  style?: ViewStyle
--  } & Pick<
++  } & Partial<Pick<
  RadixContentProps,
  | 'loop'
  | 'side'
  | 'align'
  | 'alignOffset'
  | 'avoidCollisions'
  | 'collisionPadding'
  | 'sideOffset'
-- >
++ >>

the original code can be found in this link

Additionally, the problem also shows in DropdownMenu.SubContent.

Before the author confirm this, we can also ignore the type error by add comment {/* @ts-ignore */} just above DropdownMenu.Content or DropdownMenu.SubContent, but do this after everything is ok but the exact type error above.

[nandorojo]

Sorry I missed this earlier.

This actually indicates that for some reason the radix types aren’t being pulled into your app. Are you using yarn or NPM? The partial workaround will work, but only because it’s doing Partial<any…I’d ideally like to see why radix types aren’t pulling in if possible.

I’m using yarn and not seeing this issue myself. Which version of zeego are you on? Thanks!

[nandorojo]

If you are using NPM, does adding —legacy-peer-deps to your install script help?

[wcastand]

i get the error and i use bun if that can help :)

[acdifran]

seeing the same using pnpm

[nandorojo]

you could try installing @radix-ui/react-dropdown-menu, though this shouldn't be needed...

[austin43]

you could try installing @radix-ui/react-dropdown-menu, though this shouldn't be needed...

I'm using bun, and this does not fix it unfortunately.

I did notice there were three problematic props that, when removed from the Content type in lib/typescript/dropdown-menu/dropdown-menu.d.ts, fix the issue.

• placeholder
• onPointerEnterCapture
• onPointerLeaveCapture

Just found this library so couldn't find where those typescript files come from, but hope this helps.

[RamiroG8k]

Happens the same with ContextMenu, i'm using npm

[xxwangkaimin]

Although the program can run normally.
As shown in the figure, I used three components: content, label, and item, all of which have type errors.

[joshsmith]

Just want to confirm that for both DropdownMenu.Content and DropdownMenu.CheckboxItem I am seeing ts errors for missing placeholder, onPointerEnterCapture, and onPointerLeaveCapture.

[nandorojo]

Is this on v2 as well? Can you use —legacy-peer-deps when you run install? I think this is an issue with npm/pnpm potentially

[bnussman]

Can confirmed this is introduced by v2. v2 is unuseable until this is fixed

[joshsmith]

Yeah, I only started seeing the errors after upping to v2.

[alarm109]

Same issue using yarn

[nandorojo]

Working on a fix

[nandorojo]

Fixed in 2.0.3, thanks for reporting and for your patience

[JustJoostNL]

@nandorojo

In version 2.0.3, it looks like the TypeScript issue was only fixed for DropdownMenu.Content. However, DropdownMenu.CheckboxItem still has TS errors, similar to what @joshsmith reported. Specifically, onPointerEnterCapture, onPointerLeaveCapture, and placeholder are still required, which causes errors.

[nandorojo]

Just published 2.0.4 which I think would fix this

[JustJoostNL]

Awesome, thanks!

[erickreutz]

I'm using 2.0.4 and this is still a problem for me when using DropdownMenu.CheckboxItem

Type '{ key: string; value: "off" | "on"; onValueChange: () => void; }' is missing the following properties from type 'Omit<Pick<DropdownMenuCheckboxItemProps & RefAttributes<HTMLDivElement>, "onChange" | "slot" | "style" | "title" | ... 255 more ... | "onCheckedChange">, "key" | ... 5 more ... | "shouldDismissMenuOnSelect">': placeholder, onPointerEnterCapture, onPointerLeaveCapturets(2739)

Same issue with DropdownMenu.ItemIndicator

Type '{}' is missing the following properties from type 'Pick<DropdownMenuItemIndicatorProps & RefAttributes<HTMLSpanElement>, "onChange" | "slot" | "style" | ... 253 more ... | "onPointerLeaveCapture">': placeholder, onPointerEnterCapture, onPointerLeaveCapturets(2739)

[nandorojo]

I’ll check tomorrow, should be a simple fix. New versions of TS have perf improvements but result in issues for putting imported types in generics

[JustJoostNL]

action is also not recognized as property on DropdownMenu.Trigger. I guess that's the same issue?

Type '{ children: Element; action: string; }' is not assignable to type 'IntrinsicAttributes & DropdownMenuTriggerProps & RefAttributes<HTMLButtonElement>'.
  Property 'action' does not exist on type 'IntrinsicAttributes & DropdownMenuTriggerProps & RefAttributes<HTMLButtonElement>'

[megacherry]

I have the same issue (i think), but on DropdownMenu.Label:

Type '{}' is missing the following properties from type 'Pick<MenuLabelProps & RefAttributes<HTMLDivElement>, "title" | "color" | "children" | "id" | "style" | "className" | "tabIndex" | ... 248 more ... | "asChild">': onPointerEnterCapture, onPointerLeaveCapture, placeholderts(2739)

[softwarebyze]

Just published 2.0.4 which I think would fix this

this issue was fixed for me by upgrading to 2.0.4

[joaolfr]

Still facing this issue after upgrading to 2.0.4

action is also not recognized as property on DropdownMenu.Trigger.

Besides that, action press is not working, only the longPress is recognized.

[pmmmwh]

Looks like if you have moduleSuffixes set in tsconfig.json, there are a lot more type errors 🤔

If only the main .d.ts is relevant, maybe don't ship .ios.d.ts and .android.d.ts altogether?