[BUG] - React does not recognize the isSelected prop on a DOM element. CheckBox

[Iangyl]

NextUI Version

2.3.5

Describe the bug

Warning: React does not recognize the `isSelected` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `isselected` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    at div
    at span
    at label
    at eval (webpack-internal:///./node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected][email protected]/node_modules/@nextui-org/checkbox/dist/chunk-HUKVTWEI.mjs:30:71)

Warning: React does not recognize the `isIndeterminate` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `isindeterminate` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    at div
    at span
    at label
    at eval (webpack-internal:///./node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected][email protected]/node_modules/@nextui-org/checkbox/dist/chunk-HUKVTWEI.mjs:30:71)

client.js:25 
 Warning: React does not recognize the `disableAnimation` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `disableanimation` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    at div
    at span
    at label
    at eval (webpack-internal:///./node_modules/.pnpm/@[email protected]_@nextu…[email protected]/node_modules/@nextui-org/checkbox/dist/chunk-HUKVTWEI.mjs:30:71)

Your Example Website or App

https://codesandbox.io/p/sandbox/blissful-river-72wv8k?layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clummlcvv00063j6kcic6i7lh%2522%252C%2522sizes%2522%253A%255B100%252C0%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clummlcvv00023j6kt34jzu2m%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clummlcvv00033j6kwkzzecou%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clummlcvv00053j6k5huyiakv%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B40%252C60%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clummlcvv00023j6kt34jzu2m%2522%253A%257B%2522id%2522%253A%2522clummlcvv00023j6kt34jzu2m%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clumou7n600023j6kk3w5wbjr%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A2%252C%2522startColumn%2522%253A29%252C%2522endLineNumber%2522%253A2%252C%2522endColumn%2522%253A29%257D%255D%252C%2522filepath%2522%253A%2522%252Fsrc%252FApp.tsx%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522activeTabId%2522%253A%2522clumou7n600023j6kk3w5wbjr%2522%257D%252C%2522clummlcvv00053j6k5huyiakv%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clummlcvv00043j6kp9std1xt%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522id%2522%253A%2522clummlcvv00053j6k5huyiakv%2522%252C%2522activeTabId%2522%253A%2522clummlcvv00043j6kp9std1xt%2522%257D%252C%2522clummlcvv00033j6kwkzzecou%2522%253A%257B%2522tabs%2522%253A%255B%255D%252C%2522id%2522%253A%2522clummlcvv00033j6kwkzzecou%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Afalse%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

Steps to Reproduce the Bug or Issue

1. Create checkbox.
2. Pass props as in code
3. Use it.

Component code:

import { Checkbox, cn } from '@nextui-org/react';
import { ReactNode } from 'react';

const DefaultCheckBox = ({
  children,
  value,
  isSelected,
  onValueChange,
}: {
  children: ReactNode;
  value: string;
  isSelected?: boolean;
  onValueChange?: (isSelected: boolean) => void;
}) => {
  return (
    <Checkbox
      isSelected={isSelected}
      onValueChange={onValueChange}
      radius='none'
      icon={<div></div>}
      value={value}
      size='sm'
      classNames={{
        base: cn('bg-transparent'),
        label: 'text-secondary',
        wrapper:
          'rounded-sm bg-white group-data-[selected=true]:after:bg-link group-data-[selected=true]:after:scale-80 after:rounded-[1px] before:border-transparent group-data-[invalid=true]:before:border-accent-red',
        icon: 'group-data-[selected=true]:bg-link',
      }}
    >
      {children}
    </Checkbox>
  );
};

export default DefaultCheckBox;

Expected behavior

As a user, I expected to receive a checkbox on my screen and have the possibility to interact with it.

Screenshots or Videos

I see nothing.
Only errors:

Operating System Version

Windows 11

Browser

Chrome

[linear]

ENG-725 [BUG] - React does not recognize the `isSelected` prop on a DOM element. CheckBox

[wingkwong]

This is because those props will be passed to icon, i.e. a div in your case which is not expected. Here's the example how a custom icon should look like.

type CheckboxIconProps = Partial<ReturnType<UseCheckboxReturn["getIconProps"]>>;

function CheckIcon(props: CheckboxIconProps) {
  const {isSelected, disableAnimation, ...otherProps} = props;

  return (
    <svg aria-hidden="true" role="presentation" viewBox="0 0 17 18" {...otherProps}>
      <polyline
        fill="none"
        points="1 9 7 14 15 4"
        stroke="currentColor"
        strokeDasharray={22}
        strokeDashoffset={isSelected ? 44 : 66}
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth={2}
        style={
          !disableAnimation && isSelected
            ? {
                transition: "stroke-dashoffset 250ms linear 0.2s",
              }
            : {}
        }
      />
    </svg>
  );
}

You can also you custom icon function to avoid passing the props.

icon: () => <div />,

[rharkor]

Hi, I have the same problem with <Avatar> within a <Select>, no matter if I use startContent or renderValue I have:
Warning: React does not recognize the `disableAnimation` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `disableanimation` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

My code:

<Select
 selectedKeys={[dynamicLocale]}
 onChange={(e) => {
   const locale = e.target.value as Locale | undefined
   if (!locale) return
   handleLocaleChange(locale)
   setDynamicLocale(locale)
 }}
 className="w-[150px]"
 aria-label={localesDetailed[lang].nativeName}
 startContent={<Avatar alt={lang} className="!size-4 shrink-0" src={localesDetailed[lang].flag} />}
 size="sm"
 selectionMode="single"
>
 {Object.entries(localesDetailed).map(([locale, details]) => (
   <SelectItem
     key={locale}
     value={locale}
     startContent={<Avatar alt={locale} className="!size-6" src={details.flag} />}
   >
     {details.nativeName}
   </SelectItem>
 ))}
</Select>

Thanks

[bllakcn]

HI guys, I have started seeing this issue (disableAnimation) as well. I am not sure how it started but it felt like it appeared out of nowhere, at least it wasn't there when i first wrote the component. The error was triggered by an Avatar component in a Card component.

I assume it appeared with the v2.4.0 but when i updated to v2.4.1 it is resolved. Hope it does the same for you.

[wingkwong]

@rharkor which version are you using?
@bllakcn disableAnimation was another issue (they are similar tho) which I already fixed it.

[bllakcn]

Hey @wingkwong, here is a quick update on my side. I started seeing the error again. My version is v.2.4.2.

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

Here is an example snippet but i observed the error in any Avatar components.

<Card>
  <CardHeader>
    <Badge>
       <Avatar/>
    <Badge/>
  <CardHeader/>
...
<Card/>

[wingkwong]

@bllakcn for avatar, it's a known issue on 2.4.2. See #3257 (comment).

[wingkwong]

Closing - for original issue (checkbox), see this comment