[Bug]: Combobox component error: Uncaught TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator)) #2980
Comments
|
This seems to come from the library called cmdk cause when i fallback to older version ^0.2.0 it works with out problem, the newer version ^1.0.0. The Comobox component uses that library. Any fixes @pacocoursey, thanks in advance. |
|
In the v.1 release notes https://github.com/pacocoursey/cmdk/releases/tag/v1.0.0 So you need to add the CommandList beneath the Command component in your usecase to work @aynuayex |
|
Thanks, but there are also other breaking change such as can't select the items and all the available items are grayed out ,hover and other styles not working , so the Combobox component should be updated to reflect the changes |
|
yes, please read issue #2944 <#2944>
as @k1eu <https://github.com/k1eu> mentioned on the issue i created.
…On Tue, 26 Mar 2024 at 03:33, Sholuade Olamide ***@***.***> wrote:
Thanks, but there are also other breaking change such as can't select the
items and all the available items are grayed out ,hover and other styles
not working , so the Combobox component should be updated to reflect the
changes
@aynuayex <https://github.com/aynuayex> did you find a workaround the
items selection and all other stylings?
—
Reply to this email directly, view it on GitHub
<#2980 (comment)>, or
unsubscribe
<https://github.com/notifications/unsubscribe-auth/A2UUHBCL32PCADWS4NW63UTY2FFJDAVCNFSM6AAAAABEP6N552VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDAMRQGA3DSNBRGM>
.
You are receiving this because you were mentioned.Message ID:
***@***.***>
|
|
I just had to modify the cmdk to an older version of ^0.2.1 and it worked perfectly well. |
|
Wrapping <CommandGroup>
<CommandList>
{options.map((option) => (
<CommandItem
key={option.value}
value={option.value}
onSelect={(currentValue) => {
setValue(currentValue === value ? "" : currentValue);
setOpen(false);
onSelect(currentValue);
}}
>
<CheckCircledIcon
className={cn(
"mr-2 h-4 w-4",
value === option.value ? "opacity-100" : "opacity-0"
)}
/>
{option.label}
</CommandItem>
))}
</CommandList>
</CommandGroup> |
|
Is this issue fixed ? I got the same issue in NextJs project. |
Did you try the fix above your comment, should fix your issue. The docs haven't been updated yet. Might be worth putting in a pull request if no one has already. |
Wrapping the items inside CommandGroup in CommandList fixes the issue, but creates other issue, all the items get greyed out and unclickable:
This is the code I am using: <CommandGroup>
<CommandList>
{frameworks.map((framework) => (
<CommandItem
key={framework.value}
value={framework.value}
onSelect={(currentValue) => {
setValue(currentValue === value ? "" : currentValue);
setOpen(false);
}}
>
<Check
className={cn(
"mr-2 h-4 w-4",
value === framework.value ? "opacity-100" : "opacity-0"
)}
/>
{framework.label}
</CommandItem>
))}
</CommandList>
</CommandGroup> |
|
@danilo-css @Gimhan001 Since You guys are very bored to read the issue that i have mentioned to solve the grayed out problem of the list items displayed, i will generalize the answer here once and for all the time.so here is the code that prevents the above error from happening: so, warping the to solve the list items being grayed out, open |
|
@aynuayex Here is my code: And it still not working as well. Can't click the item |
|
@tranduybau please read this(it is the comment just above your comment at the end of it. |
Turn out the problems is millions, I used your code but it didnt hot reload. I re-run the web and it's all good, Thank you mate :D Have a good day. |
|
I got this problem after using your code @aynuayex |
|
@Priyanshu85 sorry for the late reply and the error.it is caused because of my implementation in my code, i add className since i have addtional classNames to style the combobox i.e, i have made the combobox(the above code) a component and passing additional styles. |
|
Hi @aynuayex , today I faced another issue is can't scroll when the content is too long, Have you ever seen that before? |
|
@aynuayex 🤝 |
It works fine! Just do not forget about this detail. |
Best option!thank you! |
tanks this work |
No, I haven't, mine works fine when the content is too long. what version are you using? |
|
he issue came from the modal. Didnt have the props modal={true}. Resolved :D |
Thanks for helping !! This solution worked for me. |
|
use lower version of "cmdk": "^1.0.0" ====> "cmdk": "^0.2.0 " |
@kyusungpark No no, unless there is new thing in your code or because of how you use react-hook-form with it. also cmdk has no new version releases,so it should lool like this |
|
@aynuayex The problem was solved for me,bro ,thank you for you time |
thanks, but any idea why I need to have a separate state for open? Isn't PopoverTrigger supposed to hande this? Also, having |
|
@kyusungpark Use CommandList <Command dir="rtl">
<CommandInput dir="rtl" placeholder={nameAction} />
<CommandList>
<CommandEmpty>not found!</CommandEmpty>
<CommandGroup>
{data.map((item) => (
<CommandItem
key={item.id}
value={item.id.toString()}
onSelect={() => handleSelect(item.id)}
className="hover:bg-red-950 my-1 text-end cursor-pointer"
>
{item.name} {item?.title}
<Check
className={cn(
"mr-4 h-4 w-4",
selectedItem === item.id ? "opacity-100" : "opacity-0"
)}
/>
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
|
|
Yeah, that's pretty much what I have '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=false]:pointer-events-auto data-[disabled=true]:opacity-50', If I set data-[disabled=false]:pointer-events-auto to true it doesn't work |
|
Why is this issue marked as closed? |
|
I edited the command.tsx component per advice here... and wrapped my stuff with CommandList and it now displays and things aren't grayed out but the component doesn't work - typing or clicking in it doesn't ever search or select anything. I'm tryingto use the component inside a Sheet - this crappy behavior doesn't seem to exist if I use it outside of the Sheet :( |
I use it with a form that is inside is a sheet and what I have above works. Did you get it to close on click though? I had to manually add state to close it onClick |
|
I ultimately want to use it in a form in a sheet - was just iterating my
way through to that. If that works for you, perhaps I'll give it a whirl
and see if it makes any difference! I can't quite figure out what in the
Sheet would be disabling the mouse and keyboard input in the command , but
something is.
…On Thu, Jul 11, 2024 at 2:23 PM Kyu Sung Park ***@***.***> wrote:
I edited the command.tsx component per advice here... and wrapped my stuff
with CommandList and it now displays and things aren't grayed out but the
component doesn't work - typing or clicking in it doesn't ever search or
select anything. I'm tryingto use the component inside a Sheet - this
crappy behavior doesn't seem to exist if I use it outside of the Sheet :(
I use it with a form that is inside is a sheet and what I have above
works. Did you get it to close on click though? I had to manually add state
to close it onClick
—
Reply to this email directly, view it on GitHub
<#2980 (comment)>, or
unsubscribe
<https://github.com/notifications/unsubscribe-auth/AABLRNIXX7AXCCQ6ITD7LRTZL3ZVTAVCNFSM6AAAAABEP6N552VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDEMRTHE3DENZWGU>
.
You are receiving this because you commented.Message ID:
***@***.***>
--
Eric Bloch
@eedeebee
15 Miranda Court, Hillsborough CA 94010
Email: ***@***.***
Phone: 650-339-0376
|
|
I've got a reproducible case of combobox as described here - with the edits to the className and use of basically working outside of a and inside a , the keyboard and mouse inputs are ignored. Guessing another shadcn combobox bug. |
|
@kyusungpark "use client"
import * as React from "react"
import { type DialogProps } from "@radix-ui/react-dialog"
import { Command as CommandPrimitive } from "cmdk"
import { Search } from "lucide-react"
import { cn } from "@/lib/utils"
import { Dialog, DialogContent } from "@/components/ui/dialog"
const Command = React.forwardRef<
React.ElementRef<typeof CommandPrimitive>,
React.ComponentPropsWithoutRef<typeof CommandPrimitive>
>(({ className, ...props }, ref) => (
<CommandPrimitive
ref={ref}
className={cn(
"flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
className
)}
{...props}
/>
))
Command.displayName = CommandPrimitive.displayName
interface CommandDialogProps extends DialogProps {}
const CommandDialog = ({ children, ...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">
{children}
</Command>
</DialogContent>
</Dialog>
)
}
const CommandInput = React.forwardRef<
React.ElementRef<typeof CommandPrimitive.Input>,
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
>(({ className, ...props }, ref) => (
<div className="flex items-center border-b px-3" cmdk-input-wrapper="">
<Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
<CommandPrimitive.Input
ref={ref}
className={cn(
"flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
className
)}
{...props}
/>
</div>
))
CommandInput.displayName = CommandPrimitive.Input.displayName
const CommandList = React.forwardRef<
React.ElementRef<typeof CommandPrimitive.List>,
React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
>(({ className, ...props }, ref) => (
<CommandPrimitive.List
ref={ref}
className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
{...props}
/>
))
CommandList.displayName = CommandPrimitive.List.displayName
const CommandEmpty = React.forwardRef<
React.ElementRef<typeof CommandPrimitive.Empty>,
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
>((props, ref) => (
<CommandPrimitive.Empty
ref={ref}
className="py-6 text-center text-sm"
{...props}
/>
))
CommandEmpty.displayName = CommandPrimitive.Empty.displayName
const CommandGroup = React.forwardRef<
React.ElementRef<typeof CommandPrimitive.Group>,
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
>(({ className, ...props }, ref) => (
<CommandPrimitive.Group
ref={ref}
className={cn(
"overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
className
)}
{...props}
/>
))
CommandGroup.displayName = CommandPrimitive.Group.displayName
const CommandSeparator = React.forwardRef<
React.ElementRef<typeof CommandPrimitive.Separator>,
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
>(({ className, ...props }, ref) => (
<CommandPrimitive.Separator
ref={ref}
className={cn("-mx-1 h-px bg-border", className)}
{...props}
/>
))
CommandSeparator.displayName = CommandPrimitive.Separator.displayName
const CommandItem = React.forwardRef<
React.ElementRef<typeof CommandPrimitive.Item>,
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
>(({ className, ...props }, ref) => (
<CommandPrimitive.Item
ref={ref}
className={cn(
"flex justify-start items-center text_right select-none rounded-sm py-2 text-xs outline-none aria-selected:bg-blue-100 aria-selected:text-black ",
className
)}
{...props}
/>
))
CommandItem.displayName = CommandPrimitive.Item.displayName
const CommandShortcut = ({
className,
...props
}: React.HTMLAttributes<HTMLSpanElement>) => {
return (
<span
className={cn(
"ml-auto text-xs hover:text-black tracking-widest text-muted-foreground",
className
)}
{...props}
/>
)
}
CommandShortcut.displayName = "CommandShortcut"
export {
Command,
CommandDialog,
CommandInput,
CommandList,
CommandEmpty,
CommandGroup,
CommandItem,
CommandShortcut,
CommandSeparator,
} |
|
@kyusungpark import * as React from "react";
import { Check, ChevronsUpDown } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
import { Text } from "@radix-ui/themes";
import { TypesearchSelected } from "../../types/TypeAllDoctors.type";
import { cn } from "@/lib/utils";
function ComboboxDemo({
label,
data,
nameAction,
onChange,
selectedItem,
onSelect,
}: TypesearchSelected) {
const [open, setOpen] = React.useState(false);
const handleSelect = (currentValue: number) => {
console.log("Selected Value:", currentValue);
onSelect(currentValue); // Call onSelect prop with the selected value
setOpen(false);
onChange(currentValue);
};
return (
<div className="border-b-[1px] border-gray-200 pb-3">
<Text mb={"3"} color="gray" className="float-right">
{label}
</Text>
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger dir="rtl" asChild>
<Button
variant="outline"
role="combobox"
aria-expanded={open}
className="w-full justify-between hover:bg-white hover:text-black"
onClick={() => setOpen((prevOpen) => !prevOpen)}
>
{selectedItem !== null ? (
data.find((item) => item.id === selectedItem)?.name ||
data.find((item) => item.id === selectedItem)?.title ||
nameAction
) : (
nameAction
)}
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
</Button>
</PopoverTrigger>
<PopoverContent dir="ltr" className="w-[320px] p-0">
<Command>
<CommandInput dir="rtl" placeholder={nameAction} />
<CommandList>
<CommandEmpty>not found!</CommandEmpty>
<CommandGroup>
{data.map((item) => (
<CommandItem
dir="rtl"
key={item.id}
onSelect={() => handleSelect(item.id)}
className="my-1 text-end cursor-pointer"
aria-selected={selectedItem === item.id}
>
{item.name} {item?.title}
<Check
className={cn(
"mr-4 h-4 w-4",
selectedItem === item.id ? "opacity-100" : "opacity-0"
)}
/>
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
</div>
);
}
export default ComboboxDemo;
|
|
So I was able to address part of thigns not working in Sheet by
I can now get mouse events, but still no keyboard events. Also the combo doesn't scroll when it's long. I guess that's left to the reader still. |
|
I understand that I had the same problem and there is a method tailwind nam aria-selected, If you remove it, you can hover it with the mouse |
I do the same. I have a sheet and inside a Form which has a combobox. Can't get scroll to work. |
|
@kyusungpark |
|
So this issue is closed and the docs are still wrong? |
@logemann, mind creating a PR? |
|
@logemann Reporte a problem! |
|
There was a problem called "issue" where we just typing in messages. Closing this means its fixed right? I definitely wont report that an issue was "closed" w/o fixing it..... |
|
Maybe there is a problem or there is no access |
|
For me, this comment : #2980 (comment) helps me a lot. just by wrapping the |
|
it's true |
|
Why this issue is closed without PR? |
Same here |
|
I've resolved the issue I was encountering after importing Here's what I did to fix it: Double-checked that Thats it. |
|
I was trying to debug this in my code thinking I had missed a NULL or undefined variable (.map iteration) or deconstruction error. Having such bugs in common UI components should be resolved and any new version we import should not have this issue! |
Describe the bug
i am having the below error when i try to use Combobox component from shadcn-ui library, note that i have directly copy the code from there docs. The error happens when i click on the combobox. i am using the below versions:
the error
Affected component/components
Combobox
How to reproduce
1, create a new project using vite, just be sure to use the versions below i mention
2, add the combobox component and any other components that depend on it.
3, and copy paste the code from the docs and run your application
Codesandbox/StackBlitz link
No response
Logs
No response
System Info
Before submitting
The text was updated successfully, but these errors were encountered: