Skip to content
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.

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

[bug]: dropdownMenu 属性类型不匹配 #93

Closed
2 tasks done
bytegolang opened this issue Jun 7, 2024 · 1 comment
Closed
2 tasks done

[bug]: dropdownMenu 属性类型不匹配 #93

bytegolang opened this issue Jun 7, 2024 · 1 comment
Labels
bug Something isn't working

Comments

@bytegolang
Copy link

Describe the bug

代码行数

错误描述:Type '{ id?: string | undefined; ref?: HTMLElement | ((el: HTMLElement) => void) | undefined; as: "div"; class: string; }' is not assignable to type 'IntrinsicAttributes & Omit<HTMLAttributes, "as" | keyof MenuItemLabelCommonProps<ElementOf>> & MenuItemLabelOptions & Partial<...> & PolymorphicAttributes<...>'.
Type '{ id?: string | undefined; ref?: HTMLElement | ((el: HTMLElement) => void) | undefined; as: "div"; class: string; }' is not assignable to type 'Partial<MenuItemLabelCommonProps>'.
Types of property 'ref' are incompatible.
Type 'HTMLElement | ((el: HTMLElement) => void) | undefined' is not assignable to type 'HTMLDivElement | ((el: HTMLDivElement) => void) | undefined'.
Type 'HTMLElement' is not assignable to type 'HTMLDivElement | ((el: HTMLDivElement) => void) | undefined'.
Property 'align' is missing in type 'HTMLElement' but required in type 'HTMLDivElement'.ts(2322)
lib.dom.d.ts(10066, 5): 'align' is declared here.

Affected component/components

dropdownMenu

How to reproduce

代码行数

Codesandbox/StackBlitz link

No response

Logs

No response

System Info

window 10
chrome

Before submitting

  • I've made research efforts and searched the documentation
  • I've searched for existing issues
@bytegolang bytegolang added the bug Something isn't working label Jun 7, 2024
@hngngn
Copy link
Owner

hngngn commented Jun 7, 2024

This is because of kobaltedev/kobalte#420 and will be fixed when #86 is merge

For now, you can do this

type DropdownMenuItemLabelProps<T extends ValidComponent = "div"> =
  DropdownMenuPrimitive.DropdownMenuItemLabelProps<T> & {
    class?: string;
  };

export const DropdownMenuItemLabel = <T extends ValidComponent = "div">(
  props: PolymorphicProps<T, DropdownMenuItemLabelProps<T>>,
) => {
  const [local, rest] = splitProps(props as DropdownMenuItemLabelProps, [
    "class",
  ]);

  return (
    <DropdownMenuPrimitive.ItemLabel
      as="div"
      class={cn("px-2 py-1.5 text-sm font-semibold", local.class)}
      {...rest}
    />
  );
};

@hngngn hngngn closed this as completed Jun 7, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants