Using asChild-prop on DropdownItem generates errors

[hansenalexander]

Description of the bug

Using asChild on DropdownItem causes an error:

Warning: React does not recognize the asChild prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase aschild instead. If you accidentally passed it from a parent component, remove it from the DOM element.

Full stacktrace: dropdownitem-asChild.txt

Steps To Reproduce

Use asChild-prop on DropdownItem

Additional Information

No response

[Barsnes]

Hi, thanks for the issue. Can you provide the markup you are using as well? I can't seem to recreate the issue

[hansenalexander]

Him thanks for the issue. Can you provide the markup you are using as well? I can't seem to recreate the issue

Here you go:

const [open, setOpen] = useState(false);

return (
<DropdownContext>
  <DropdownTrigger className={styles.dropdownTrigger} variant={'secondary'} onClick={() => setOpen(!open)}>
    {t('downloadSearchResult')}
    {isLoading ? (
    <Spinner title={t('downloadExcelisLoading')} color='accent' />
    ) : !open ? (
    <ChevronDownIcon />
    ) : (
    <ChevronUpIcon />
    )}
  </DropdownTrigger>
  <Dropdown open={open} placement='bottom-start' onClose={() => setOpen(false)}>
    <DropdownList>
      <DropdownItem asChild>
        <a href={`${getEnv().api.enhet}/${enhetsType}/lastned?${searchParams}`} target={'_blank'}>
          {t('downloadJson')}
        </a>
      </DropdownItem>
      <DropdownItem asChild>
        <a href='#' onClick={e => onClickDownloadExcel(e)} target={'_blank'}>
          {t('downloadExcel')}
        </a>
      </DropdownItem>
    </DropdownList>
  </Dropdown>
</DropdownContext>
)

[Barsnes]

Hi, I believe this should be resolved in our latest release. There was an issue with our Button component that caused this. Could you test this again to see if you are still getting the bug?

[hansenalexander]

Looking good now :smile: