Skip to content

Issue after updating to newest version with hoverPopover  #152

@ElectricCodeGuy

Description

@ElectricCodeGuy

Description

After upgrading to the latest version, I'm getting a TypeScript error with HoverPopover component from material-ui-popup-state.

Error Message

'HoverPopover' cannot be used as a JSX component.
Its type 'ComponentType<PopoverProps>' is not a valid JSX element type.
  Type 'ComponentClass<PopoverProps, any>' is not assignable to type 'ElementType'.
    Type 'ComponentClass<PopoverProps, any>' is not assignable to type 'new (props: any, deprecatedLegacyContext?: any) => Component<any, any, any>'.
      Property 'refs' is missing in type 'Component<PopoverProps, any, any>' but required in type 'Component<any, any, any>'

Code Example

<PopupState variant="popover" popupId="profile-menu">
  {(popupState) => (
    <>
      <Button
        {...bindHover(popupState)}
        component={Link}
        href="/xxx"
        prefetch={false}
        onMouseEnter={() => router.prefetch('/xxx')}
        endIcon={<KeyboardArrowDownIcon />}
        sx={linkStyleDesktop}
        className={isActive('/xxx') ? 'active' : ''}
      >
        Min Profil
      </Button>
      <HoverPopover
        {...bindPopover(popupState)}
        anchorOrigin={{
          vertical: 'bottom',
          horizontal: 'left'
        }}
        transformOrigin={{
          vertical: 'top',
          horizontal: 'left'
        }}
        disableScrollLock
      >
        <Box sx={{ py: 1 }}>
          {/* Menu items */}
        </Box>
      </HoverPopover>
    </>
  )}
</PopupState>

Additional Context

  • This code worked in the previous version without any type errors

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions