-
Notifications
You must be signed in to change notification settings - Fork 3.3k
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.
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
[bug]: Combo box is not working. #3707
Comments
maybe the cmdk package has some changes and the shadcnui not response to. |
you need to use this version, v1 doesnt work "cmdk": "^0.2.1", or
plugins: [
require("tailwindcss-animate"),
function ({ addUtilities }) {
addUtilities({
".popover-content-width-same-as-its-trigger": {
width: "var(--radix-popover-trigger-width)",
"max-height": "var(--radix-popover-content-available-height)",
},
});
},
],
type MyComboboxProps = {
label?: string;
value: string;
setValue: (value: string) => void;
values: { label: string; value: string }[];
inputDisabled?: boolean;
inputPlaceholder?: string;
};
export const MyCombobox: React.FC<MyComboboxProps> = (props) => {
const [open, setOpen] = useState(false);
return (
<Popover open={open} onOpenChange={setOpen}>
<div className="flex flex-col w-full">
{props.label && <Label className="mb-1">{props.label}</Label>}
<PopoverTrigger asChild>
<Button
variant="outline"
role="combobox"
aria-expanded={open}
className=" justify-between"
>
{props.value
? props.values.find((item) => item.value === props.value)?.label
: props.label + "..."}
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
</Button>
</PopoverTrigger>
</div>
<PopoverContent
className={"popover-content-width-same-as-its-trigger p-0"}
>
<Command>
{props.inputDisabled && (
<CommandInput placeholder={props.inputPlaceholder} />
)}
<CommandEmpty>NOTHING_FOUND</CommandEmpty>
<CommandGroup>
<CommandList>
{props.values.map((item) => (
<CommandItem
key={item.value}
value={item.value}
onSelect={(currentValue) => {
props.setValue(
currentValue === props.value ? "" : currentValue
);
setOpen(false);
}}
>
<Check
className={cn(
"mr-2 h-4 w-4",
props.value === item.value ? "opacity-100" : "opacity-0"
)}
/>
{item.label}
</CommandItem>
))}
</CommandList>
</CommandGroup>
</Command>
</PopoverContent>
</Popover>
);
}; |
Great catch, once downgrading I no longer run into the issue. |
Just wrap It should look like this: (just command, popover stuff removed for brevity)
|
Weekend saved, nice catch |
Yo bro, the command box may not be working for 2 reasons.
"use client"; import * as React from "react"; import { cn } from "@/lib/utils"; const Command = React.forwardRef<
interface CommandDialogProps extends DialogProps {} const CommandDialog = ({ children, ...props }: CommandDialogProps) => { const CommandInput = React.forwardRef<
CommandInput.displayName = CommandPrimitive.Input.displayName; const CommandList = React.forwardRef<
CommandList.displayName = CommandPrimitive.List.displayName; const CommandEmpty = React.forwardRef<
CommandEmpty.displayName = CommandPrimitive.Empty.displayName; const CommandGroup = React.forwardRef<
CommandGroup.displayName = CommandPrimitive.Group.displayName; const CommandSeparator = React.forwardRef<
const CommandItem = React.forwardRef<
CommandItem.displayName = CommandPrimitive.Item.displayName; const CommandShortcut = ({ export { |
Thanks man. |
Describe the bug
the default code for combobox in a next.js app throws this error:
Unhandled Runtime Error
TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))
Affected component/components
ComboBox
How to reproduce
just copy the default code for combo box from shadcnui.com/combobox and paste it in page.tsx
run the code and the error should pop up while trying to click the PopoverTrigger button.
Codesandbox/StackBlitz link
No response
Logs
No response
System Info
Before submitting
The text was updated successfully, but these errors were encountered: