DataTableFacetedFilter is disabled

[nareshbhatia]

I have replicated the concepts of the Tasks example in my own repo. Everything is working well, except for the DataTableFacetedFilter. When I click on the Status filter all the command items are disabled:

Any idea what I could be doing wrong?

The relevant code is here and the live application is here.

[omersomech]

Hi there, I encountered the same issue.

It appears that there's a problem with the shadcn's Command.tsx component, which is utilized in the DataTableFacetedFilter as you mentioned. Upon examining Command.tsx, you'll notice an import of something labeled as command from 'cmdk', and this seems to be the root cause of the issue.

"A temporary solution that worked for me is to adjust the npm version in the package.json file as follows:
"cmdk": "^0.2.0"

[KRIMOD]

Hi there, I too encountered the same issue, and after some investigating I think I found the culprit.

I don't think it have anything to do with the cmdk, but with the Command.tsx file provided. More specifically on the CommandItem component. Following what @sadmann7 have done in his implementation of shadncn-table, the issue seem to be in the classname ; changing from :

const CommandItem = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
>(({ className, ...props }, ref) => (
  <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 aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
      className
    )}
    {...props}
  />
))

to :

const CommandItem = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
>(({ className, ...props }, ref) => (
  <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 aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled='true']:pointer-events-none data-[disabled='true']:opacity-50",
      className
    )}
    {...props}
  />
))`

Fixed the issue for me even tho I can't yet explain it as I m not that knowledgeable on the data-[disabled='true'] thingy

[nareshbhatia]

Thank you, @omersomech and @KRIMOD. You are both correct. There was a breaking change in cmdk from v0.2.0 to v1.0.0 which is not addresses in the Command component. Essentially cmdk went from data-disabled: undefined | true to data-disabled: true | false. So I fixed my generated implementation using data-[disabled='true'].

Turns out that there are plenty of PRs submitted to correct this issue, but none of them have been approved. See here.

[lsdev200]

Hello,

I implemented a similar feature, but in my case, I also want an "ALL" filter. This filter should display all records, including those with statuses of pending, processing, success, and failed. When the "ALL" option is selected, it should display all records regardless of their status.

Thank you!