In CommandDialog, How to pass shouldFilter flag to Command?

[sravimohan]

When using CommandDialog, and the default command filter needs to be disabled, there is no way to pass shouldFilter flag as the Command is nested within the DialogContent.

Relevant section of the code in command.tsx

const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
  return (
    <Dialog {...props}>
      <DialogContent className="...">
        <Command className="...">
          {children}
        </Command>
      </DialogContent>
    </Dialog>

Here as you can see, I need to pass shouldFilter flag to the Command, for example

<Command shouldFilter={false} className="...">
   {children}
</Command>

Is there any way I can do this with the current structure?

[endrureza]

Any update on this ? i pass shouldFilter={false} to command but it's not working

[endrureza]

Dang, i need to tinker with the component

/* ui/command.tsx */
interface CommandDialogProps extends DialogProps {
  commandProps?: React.ComponentPropsWithoutRef<typeof CommandPrimitive>;
}

const CommandDialog = ({ children, commandProps, ...props }: CommandDialogProps) => {
  return (
    <Dialog {...props}>
      <DialogContent className="overflow-hidden p-0 shadow-lg">
        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5" {...commandProps}>
          {children}
        </Command>
      </DialogContent>
    </Dialog>
  );
};

you could just use like this

<CommandDialog open={open} onOpenChange={handleOpen} commandProps={{
  shouldFilter: false,
}}>
...
</CommandDialog>