nextui: [BUG] - React does not recognize the `originalProps ``isDisabled` prop on a DOM element.

NextUI Version

2.2.10

Describe the bug

Warning: React does not recognize the `isDisabled` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `isdisabled` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    at div
    at file:///Users/saadfarooq/Developer/Per-Diem/pos-onboarding-dashboard/node_modules/@nextui-org/popover/dist/chunk-K4VREUER.mjs:15:43
    at file:///Users/saadfarooq/Developer/Per-Diem/pos-onboarding-dashboard/node_modules/@nextui-org/dropdown/dist/chunk-63RZRIL7.mjs:11:35
    at file:///Users/saadfarooq/Developer/Per-Diem/pos-onboarding-dashboard/node_modules/@nextui-org/popover/dist/chunk-I7AEEVL3.mjs:16:11
    at Dropdown (file:///Users/saadfarooq/Developer/Per-Diem/pos-onboarding-dashboard/node_modules/@nextui-org/dropdown/dist/chunk-FHP3QEBP.mjs:14:11)

Warning: React does not recognize the `originalProps` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `originalprops` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    at div
    at file:///Users/saadfarooq/Developer/Per-Diem/pos-onboarding-dashboard/node_modules/@nextui-org/popover/dist/chunk-K4VREUER.mjs:15:43
    at file:///Users/saadfarooq/Developer/Per-Diem/pos-onboarding-dashboard/node_modules/@nextui-org/dropdown/dist/chunk-63RZRIL7.mjs:11:35
    at file:///Users/saadfarooq/Developer/Per-Diem/pos-onboarding-dashboard/node_modules/@nextui-org/popover/dist/chunk-I7AEEVL3.mjs:16:11
    at Dropdown (file:///Users/saadfarooq/Developer/Per-Diem/pos-onboarding-dashboard/node_modules/@nextui-org/dropdown/dist/chunk-FHP3QEBP.mjs:14:11)

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

const Dropdown: FC<DropdownProps> = ({
  baseClass = "",
  triggerClass = "",
  backdropClass = "",
  arrowClass = "",
  useMenuIcon = true,
  isDisabled = false,
  disabledKeys,
  triggerColor = "#A098AE",
  menuTriggerClass = "h-6 w-6 cursor-pointer",
  triggerDataCy = "trigger_dropdown",
  customTrigger = <MdMoreHoriz size={22} color={triggerColor} />,
  children,
}) => {
  return (
    <NextDropdown
      classNames={{
        base: `${baseClass}`,
        trigger: `${triggerClass}`,
        backdrop: `${backdropClass}`,
        arrow: `${arrowClass}`,
      }}
      isDisabled={isDisabled}
    >
      <DropdownTrigger>
        {
          <div data-cy={triggerDataCy} className={menuTriggerClass}>
            {useMenuIcon ? (
              <MdMoreHoriz size={22} color={triggerColor} />
            ) : (
              customTrigger
            )}
          </div>
        }
      </DropdownTrigger>
      <DropdownMenu
        disabledKeys={disabledKeys}
        itemClasses={{
          base: [
            "data-[hover=true]:bg-[#F2F7FE]",
            "data-[selectable=true]:focus:bg-[#F2F7FE]",
            "data-[focus-visible=true]:ring-[#F2F7FE]",
          ],
        }}
      >
        {children}
      </DropdownMenu>
    </NextDropdown>
  );
};

export default Dropdown;

Now using this as component

   <Dropdown
            menuTriggerClass=""
            useMenuIcon={false}
            customTrigger={
              <div className="flex items-center gap-2 px-1 md:px-0">
                <Avatar
                  size="md"
                  name={`${String(user?.first_name?.[0] || "U")} ${String(
                    user?.last_name?.[0] || "",
                  )}`}
                  as="button"
                  classNames={{
                    name: "text-center font-medium text-black ",
                  }}
                  className="bg-[#FFC96B] transition-transform "
                />
                <h1 className="hidden md:block">{`${String(
                  user?.first_name || "User",
                )} ${String(user?.last_name || "")}  `}</h1>
              </div>
            }
          >
            <DropdownItem>
              <div>
                <p className="text-sm font-medium">{user?.email}</p>
                <p className="py-2 text-sm text-pd-gray-500">
                  {user?.type || ""}
                </p>
                {isEmployee(userObj) && (
                  <div className="block pb-3 md:hidden">
                    <Chip
                      size="sm"
                      color="default"
                      variant="dot"
                      className={`rounded-lg bg-[#E4E5E7] text-xs`}
                    >
                      View only mode
                    </Chip>
                  </div>
                )}
                <Divider />
              </div>
            </DropdownItem>
            {isAdmin ? (
              <DropdownItem onClick={() => switchStoreController.openModal()}>
                <h1>Switch account</h1>
              </DropdownItem>
            ) : (
              <DropdownItem className="hidden"></DropdownItem>
            )}
            <DropdownItem
              onClick={() => {
                logoutController.openModal();
              }}
            >
              <h1 className="font-medium text-[#D72C0D]">Logout</h1>
            </DropdownItem>
          </Dropdown>


Expected behavior

Not to throw the error.

Screenshots or Videos

image image

Operating System Version

macOS

Browser

Chrome

About this issue

  • Original URL
  • State: closed
  • Created 4 months ago
  • Reactions: 2
  • Comments: 22 (5 by maintainers)

Most upvoted comments

@shabishabishabishabi I’ve made the PR and it’s being reviewed.

I have the same issue after updating to 2.2.10. There’s no problem when I use User instead of Avatar.

Thanks for reporting. I’m currently looking into it.

This is a really binding bug… why aren’t they releasing bux fixes… 1month since the last release is not professionnal

is it fixed at 2.3.0? This issue is still occurring.

"Warning: React does not recognize the isDisabled prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase isdisabled instead. … "

any update for this issue ?

@J4v4Scr1pt please use 2.3.3

@SeanNFT some already reported here

@pablojsx it hasn’t released yet. please wait for the next release.