fix: Command/Combobox TypeError and Unclickable/Disabled items + Documentation #2945

jhnguyen521 · 2024-03-08T07:55:47Z

Fixes #2944 due to latest cmdk update with breaking changes for the Command component. Until this fix is merged, all new command components that install cmdk@1.00 will be broken and items will not be selectable. People who also have existing components and update to cmdk 1.00 and don’t have a <CommandList> will experience crashes upon opening up the component. See issue above for more details.

Additionally handling the data-disabled property better in all components, should be backwards compatible
^ Happy to not do this for all other components, but I figure it's better to just do this preventatively if it's backwards compatible. Either way, things will break for data-disabled="false" for all existing data-[disabled]
Applied same fix for aria-selected
Fixing broken examples for command component

vercel · 2024-03-08T07:55:51Z

@jhnguyen521 is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.

kevinmitch14 · 2024-03-08T13:56:18Z

This PR handles the proper styling via data attributes + dependancy bump + update registry.

#2626

jhnguyen521 · 2024-03-11T16:36:47Z

Fixed crlf line endings to lf. May be worth documenting this in contributing, but pnpm seems to output files with \r\n instead of just \r on windows machines, ignoring tsconfig compiler options

kevinmitch14 · 2024-03-11T16:52:58Z

The component specific issues have already been fixed in #2626 🤔

jhnguyen521 · 2024-03-11T16:57:35Z

The component specific issues have already been fixed in #2626 🤔

After you later added the bug fix from this and the other issue afterwards in a later commit, then yes if that counts as "already" :) Also, aria is already set in cmdk and we can be relatively certain that will always be there for accessibility reasons, not sure how opinionated we should be about using their aria/data attribute. Personally, I think it's fine to leave as is but what do I know.

Also, this PR updates necessary documentation to handle other breaking changes in cmdk.

jhnguyen521 · 2024-03-11T17:00:34Z

Happy to do a version bump in this PR as well.

kevinmitch14 · 2024-03-11T17:09:12Z

I am not too sure why you are hinting that I have "copied" your work or something?

With all due respect, the original #2626 PR was opened in January as a follow up from #1980 that was opened in November 2023. I have been monitoring this via an issue opened in the cmdk repo itself.

After my initial comment on this PR, I noticed that you made some extra commits, specifically, extra changes that were made in #2626 that had not been made in this PR. I see that these commits have now been wiped out as you cleaned the commit history...

You also commented on my PR which you have since deleted...I don't understand

After you later added the bug fix from this and the other issue afterwards in a later commit

Here is the commit you speak of...430c1b3

jhnguyen521 · 2024-03-11T17:18:14Z

After my initial comment on this PR, I noticed that you made some extra commits, specifically, extra changes that were made in #2626 that had not been made in this PR. I see that these commits have now been wiped out as you cleaned the commit history...

Yes, the change I made were applying the bug fix to the aria-selected attributes, which is the purpose of this PR? (which I might add, was also discussed and brought to my attention by someone else in #2944, so not sure what you are trying to re-imply? lol) Whereas your PR was originally just changing aria-selected -> data-selected and doing a version bump.
Huh? Cleaned the commit history? Probably because just did a rebase after some new stuff was merged in, but all commits should be as they have...

You also commented on my PR which you have since deleted...I don't understand

My comment was on being opinionated about aria-selected vs data-selected, but I realized that I was incorrect about some assumptions I was saying that made my comment irrelevant so I just deleted it :)

All I'm saying is that, it's not very cool to come in saying "already been fixed here 🤔", after applying a fix that wasn't there in the original commit an doesn't have any changes around the documentation for this component, when the purposes of our PRs are different, especially when I've been discussing with others in #2944 to workaround the issue.

Either way, I was initially annoyed, but if maintainers just want to use the earlier commit, happy to close mine and you can merge in the doc changes or I just make another PR with that. 🤷

CentraXx

For many components which are not from cmdk the applied changes do not work and cause the disable state to not work anymore.
Means the fix: data-[disabled='true'] does not work for all components.

apps/www/registry/default/ui/select.tsx

apps/www/registry/default/ui/dropdown-menu.tsx

jhnguyen521 · 2024-03-13T17:49:39Z

For many components which are not from cmdk the applied changes do not work and cause the disable state to not work anymore. Means the fix: data-[disabled='true'] does not work for all components.

Good catch, thanks! I'll probably just revert changes to all other components since I'd probably have to make a custom class in css to get this to work for all while still being in the classNames. Should make for a simpler PR as well.

benjamin-guibert · 2024-03-14T19:14:56Z

Thank you for the fix!

digitaltim-de · 2024-03-16T13:43:35Z

Same Issue on the Example Filter Function, that dont works anymore too.

nopitown · 2024-03-22T03:19:44Z

Thanks for the fix!

vercel · 2024-06-06T04:17:01Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
ui	✅ Ready (Inspect)	Visit Preview		Aug 5, 2024 11:23am

shadcn · 2024-06-06T04:19:02Z

apps/www/registry/default/ui/command.tsx

@@ -117,7 +117,7 @@ const CommandItem = React.forwardRef<
  <CommandPrimitive.Item
    ref={ref}
    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-[selected='true']:bg-accent aria-[selected='true']:text-accent-foreground data-[disabled='true']:pointer-events-none data-[disabled='true']:opacity-50",


Can we use the new data-selected attribute instead if aria? Thank you.

…yen521/ui into fix-handling-data-disabled # Conflicts: # apps/www/app/(app)/examples/playground/components/model-selector.tsx

kotAPI · 2024-07-01T10:55:37Z

Any updates on this?

saver711 · 2024-07-28T13:21:20Z

WE NEED THIS !!!

shadcn · 2024-08-05T10:21:28Z

@kevinmitch14 I merged #2626. Anything else we're missing? \cc @jhnguyen521

# Conflicts: # apps/www/app/(app)/examples/forms/account/account-form.tsx # apps/www/app/(app)/examples/playground/components/model-selector.tsx # apps/www/content/docs/components/combobox.mdx # apps/www/public/registry/styles/default/command.json # apps/www/public/registry/styles/new-york/command.json # apps/www/registry/default/ui/command.tsx # apps/www/registry/new-york/ui/command.tsx

kevinmitch14 · 2024-08-05T10:34:27Z

@shadcn it looks like some changes made in #2626 were reverted in #4181 by accident. (command.tsx, model-selector.tsx, cmdk package was reverted back to v0.2.0 files). I don't think this PR bumps it back to latest

shadcn · 2024-08-05T10:35:14Z

@kevinmitch14 Thanks. On it.

* fix: fix breaking changes for Command component that comes with cmdk 1.0.0 * chore: build registry * chore: moving paths for some examples * chore: moving paths for some examples * chore: use data instead of aria * fix: update command and pin cmdk * fix: model selector * fix: command for new york --------- Co-authored-by: shadcn <m@shadcn.com>

jhnguyen521 changed the title ~~Fix Command Component~~ fix: Broken Command component from breaking cmdk change Mar 8, 2024

arekbartnik mentioned this pull request Mar 8, 2024

fix: data-disabled is boolean in cmdk 1.0.0 #2950

Closed

collinversluis mentioned this pull request Mar 8, 2024

[Bug]: Command/Combobox TypeError and Unclickable/Disabled items, cmdk breaking change #2944

Closed

2 tasks

wobsoriano mentioned this pull request Mar 9, 2024

Issue with mapping over items with command.item and group pacocoursey/cmdk#230

Closed

This was referenced Mar 9, 2024

[Bug]: Command from cmdk not working even with Combobox #2963

Closed

feat: bump cmdk + use data attributes for styling #2626

Merged

Update combobox-demo.tsx #2948

Closed

fix(command): add value "true" into tailwind data attribute variant #2971

Open

jhnguyen521 force-pushed the fix-handling-data-disabled branch from 609bd50 to 0eb6e40 Compare March 11, 2024 16:22

This was referenced Mar 12, 2024

[Bug]: Default Combobox is currently broken. #2986

Closed

fix: incorrect code snippet for combobox-demo #2992

Open

fix: disabled combobox item for data-disabled=false #2991

Open

jhnguyen521 changed the title ~~fix: Broken Command component from breaking cmdk change~~ fix: Command/Combobox TypeError and Unclickable/Disabled items + Documentation Mar 12, 2024

fudy-pablo approved these changes Mar 13, 2024

View reviewed changes

CentraXx reviewed Mar 13, 2024

View reviewed changes

apps/www/registry/default/ui/select.tsx Outdated Show resolved Hide resolved

apps/www/registry/default/ui/dropdown-menu.tsx Outdated Show resolved Hide resolved

njdowdy mentioned this pull request Mar 14, 2024

Not able to select options using mouse click in MultiSelector hsuanyi-chou/shadcn-ui-expansions#57

Closed

noxify mentioned this pull request Mar 14, 2024

Command block only responsive to keyboard sadmann7/shadcn-table#119

Closed

Jamess-Lucass mentioned this pull request Mar 26, 2024

fix: issue #3024 of disable command input #3037

Closed

Merge branch 'main' into fix-handling-data-disabled

61dc3cd

This comment was marked as off-topic.

Sign in to view

vercel bot had a problem deploying to Preview – ui June 6, 2024 04:17 Failure

shadcn reviewed Jun 6, 2024

View reviewed changes

jhnguyen521 added 3 commits June 5, 2024 21:30

chore: moving paths for some examples

1615f6d

chore: use data instead of aria

4386a5f

Merge branch 'fix-handling-data-disabled' of https://github.com/jhngu…

3770145

…yen521/ui into fix-handling-data-disabled # Conflicts: # apps/www/app/(app)/examples/playground/components/model-selector.tsx

jhnguyen521 force-pushed the fix-handling-data-disabled branch from 6e71912 to 3770145 Compare June 6, 2024 04:40

ItayBenAmi mentioned this pull request Aug 3, 2024

[bug]: Checkbox not clickable in CommandItem #4475

Closed

2 tasks

This was referenced Aug 5, 2024

fix: update cmdk breaking changes #3268

Closed

(fix) falsely disabled combobox / command #4435

Closed

shadcn added the component: command label Aug 5, 2024

shadcn added 3 commits August 5, 2024 14:40

fix: update command and pin cmdk

43df311

fix: model selector

6064977

fix: command for new york

0fabe76

vercel bot deployed to Preview – ui August 5, 2024 11:23 View deployment

shadcn approved these changes Aug 5, 2024

View reviewed changes

shadcn merged commit 59a9310 into shadcn-ui:main Aug 5, 2024
6 checks passed

Yukiniro mentioned this pull request Aug 6, 2024

[bug]: CommandItem of Command Component #4489

Open

2 tasks

ScottyMaher mentioned this pull request Aug 7, 2024

[Bug]: Combobox - Unhandled Runtime Error TypeError: Array.from requires an array-like object - not null or undefined #3051

Closed

2 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: Command/Combobox TypeError and Unclickable/Disabled items + Documentation #2945

fix: Command/Combobox TypeError and Unclickable/Disabled items + Documentation #2945

jhnguyen521 commented Mar 8, 2024 •

edited

Loading

vercel bot commented Mar 8, 2024

kevinmitch14 commented Mar 8, 2024 •

edited

Loading

jhnguyen521 commented Mar 11, 2024

kevinmitch14 commented Mar 11, 2024

jhnguyen521 commented Mar 11, 2024 •

edited

Loading

jhnguyen521 commented Mar 11, 2024

kevinmitch14 commented Mar 11, 2024 •

edited

Loading

jhnguyen521 commented Mar 11, 2024 •

edited

Loading

CentraXx left a comment

jhnguyen521 commented Mar 13, 2024 •

edited

Loading

benjamin-guibert commented Mar 14, 2024

digitaltim-de commented Mar 16, 2024

nopitown commented Mar 22, 2024

This comment was marked as off-topic.

vercel bot commented Jun 6, 2024 •

edited

Loading

shadcn Jun 6, 2024

kotAPI commented Jul 1, 2024

saver711 commented Jul 28, 2024

shadcn commented Aug 5, 2024

kevinmitch14 commented Aug 5, 2024 •

edited

Loading

shadcn commented Aug 5, 2024

fix: Command/Combobox TypeError and Unclickable/Disabled items + Documentation #2945

fix: Command/Combobox TypeError and Unclickable/Disabled items + Documentation #2945

Conversation

jhnguyen521 commented Mar 8, 2024 • edited Loading

vercel bot commented Mar 8, 2024

kevinmitch14 commented Mar 8, 2024 • edited Loading

jhnguyen521 commented Mar 11, 2024

kevinmitch14 commented Mar 11, 2024

jhnguyen521 commented Mar 11, 2024 • edited Loading

jhnguyen521 commented Mar 11, 2024

kevinmitch14 commented Mar 11, 2024 • edited Loading

jhnguyen521 commented Mar 11, 2024 • edited Loading

CentraXx left a comment

Choose a reason for hiding this comment

jhnguyen521 commented Mar 13, 2024 • edited Loading

benjamin-guibert commented Mar 14, 2024

digitaltim-de commented Mar 16, 2024

nopitown commented Mar 22, 2024

This comment was marked as off-topic.

vercel bot commented Jun 6, 2024 • edited Loading

shadcn Jun 6, 2024

Choose a reason for hiding this comment

kotAPI commented Jul 1, 2024

saver711 commented Jul 28, 2024

shadcn commented Aug 5, 2024

kevinmitch14 commented Aug 5, 2024 • edited Loading

shadcn commented Aug 5, 2024

jhnguyen521 commented Mar 8, 2024 •

edited

Loading

kevinmitch14 commented Mar 8, 2024 •

edited

Loading

jhnguyen521 commented Mar 11, 2024 •

edited

Loading

kevinmitch14 commented Mar 11, 2024 •

edited

Loading

jhnguyen521 commented Mar 11, 2024 •

edited

Loading

jhnguyen521 commented Mar 13, 2024 •

edited

Loading

vercel bot commented Jun 6, 2024 •

edited

Loading

kevinmitch14 commented Aug 5, 2024 •

edited

Loading