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
Operating System Version
macOS
Browser
Chrome
About this issue
- Original URL
- State: closed
- Created 4 months ago
- Reactions: 2
- Comments: 22 (5 by maintainers)
@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
isDisabledprop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercaseisdisabledinstead. … "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.