Skip to content

Fix/listbox remove deprecated isdisabled #5865

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: canary
Choose a base branch
from
+28 −4
Open

Fix/listbox remove deprecated isdisabled #5865

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a88f98a
Merge pull request #5679 from heroui-inc/canary
jrgarciadev Sep 9, 2025
acd5f1d
Merge pull request #5772 from heroui-inc/canary
jrgarciadev Oct 4, 2025
680b68b
chore(docs): update nav banner (#5835)
wingkwong Oct 21, 2025
0dd973a
fix(listbox): remove deprecated isDisabled prop from ListboxItem (fix…
dharmveer97 Nov 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 24 additions & 0 deletions .changeset/remove-deprecated-isdisabled-prop.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
---
"@heroui/listbox": patch
"@heroui/autocomplete": patch
---

fix(listbox): remove deprecated isDisabled prop from ListboxItem

Remove deprecated `isDisabled` and `isSelected` props from `AriaOptionProps` inheritance in `ListboxItemBaseProps`. These props were deprecated in react-aria and should not be used on individual items.

Users should use the `disabledKeys` prop on the parent Listbox/Autocomplete component instead:

```jsx
// ❌ Before (deprecated)
<Autocomplete>
<AutocompleteItem isDisabled>Item</AutocompleteItem>
</Autocomplete>

// ✅ After (correct)
<Autocomplete disabledKeys={["item-key"]}>
<AutocompleteItem key="item-key">Item</AutocompleteItem>
</Autocomplete>
```

Fixes #5863
4 changes: 2 additions & 2 deletions apps/docs/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import {siteConfig} from "@/config/site";
import {fonts} from "@/config/fonts";
import {Navbar} from "@/components/navbar";
import {Footer} from "@/components/footer";
import {RandomBanner} from "@/components/random-banner";
import {ProBanner} from "@/components/pro-banner";
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

This change appears unrelated to the PR objectives.

The PR objectives state this PR "removes the deprecated isDisabled and isSelected props from ListboxItem and AutocompleteItem" and closes issue #5863 about deprecated props. However, this file changes the docs site banner component from RandomBanner to ProBanner, which is unrelated to the component API changes.

Consider moving this docs site improvement to a separate PR to keep changes focused and make the review clearer.

Also applies to: 86-86

🤖 Prompt for AI Agents 
In apps/docs/app/layout.tsx around lines 16 and 86 the import and usage were
changed from the docs' RandomBanner to ProBanner, which is unrelated to removing
deprecated isDisabled/isSelected props; revert the import and any usage back to
the original RandomBanner (restore the prior import line and component reference
at the indicated lines) so the PR only contains the component API changes, and
move the ProBanner/docs banner update into a separate PR for the docs
improvement.


export const metadata: Metadata = {
title: {
Expand Down Expand Up @@ -83,7 +83,7 @@ export default function RootLayout({children}: {children: React.ReactNode}) {
>
<Providers themeProps={{attribute: "class", defaultTheme: "dark"}}>
<div className="relative flex flex-col" id="app-container">
<RandomBanner />
<ProBanner />
<Navbar mobileRoutes={manifest.mobileRoutes} routes={manifest.routes} />
{children}
<Analytics mode="production" />
Expand Down
2 changes: 1 addition & 1 deletion packages/components/autocomplete/__tests__/autocomplete.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -979,7 +979,7 @@ describe("focusedKey management with selected key", () => {
disabledKeys={["penguin"]}
label="Favorite Animal"
>
<AutocompleteItem key="penguin" isDisabled>
<AutocompleteItem key="penguin">
Penguin
</AutocompleteItem>
<AutocompleteItem key="zebra">Zebra</AutocompleteItem>
Expand Down
2 changes: 1 addition & 1 deletion packages/components/listbox/src/base/listbox-item-base.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@ interface Props<T extends object = {}> extends Omit<ItemProps<"li", T>, "childre

export type ListboxItemBaseProps<T extends object = {}> = Omit<Props<T>, "onClick"> &
Omit<ListboxItemVariantProps, "hasDescriptionTextChild" | "hasTitleTextChild"> &
Omit<AriaOptionProps, "key"> &
Omit<AriaOptionProps, "key" | "isDisabled" | "isSelected"> &
FocusableProps &
PressEvents & {
/**
Expand Down