TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator)) - When using Command.Input

[SamuelBarnholdt]

As I try to write in the Command.Input it immediately gives me this error. I assume that I'm doing something wrong here.

import { Command as CommandPrimitive } from 'cmdk';
import { useRef, useState } from 'react';

const MultiSelect = () => {
  const containerRef = useRef<HTMLDivElement>(null);
  const [inputValue, setInputValue] = useState('');

  return (
    <CommandPrimitive className="flex flex-col gap-2 overflow-visible ">
      <div ref={containerRef} className="border-muted flex flex-wrap gap-1 rounded-lg border p-1 py-2">
        <CommandPrimitive.Input
          value={inputValue}
          onValueChange={setInputValue}
          placeholder="Select frameworks..."
          className="placeholder:text-muted-foreground ml-2 flex-1 bg-transparent outline-none"
        />
      </div>
      <div className="relative"></div>
    </CommandPrimitive>
  );
};

export default MultiSelect;

package.json

 "dependencies": {
    "@headlessui/tailwindcss": "^0.2.0",
    "@phosphor-icons/react": "2.0.15",
    "@radix-ui/react-avatar": "^1.0.4",
    "@radix-ui/react-checkbox": "^1.0.4",
    "@radix-ui/react-collapsible": "^1.0.3",
    "@radix-ui/react-dialog": "^1.0.5",
    "@radix-ui/react-icons": "^1.3.0",
    "@radix-ui/react-label": "^2.0.2",
    "@radix-ui/react-navigation-menu": "^1.1.4",
    "@radix-ui/react-popover": "^1.0.7",
    "@radix-ui/react-progress": "^1.0.3",
    "@radix-ui/react-radio-group": "^1.1.3",
    "@radix-ui/react-select": "^2.0.0",
    "@radix-ui/react-separator": "^1.0.3",
    "@radix-ui/react-slider": "^1.1.2",
    "@radix-ui/react-slot": "^1.0.2",
    "@radix-ui/react-switch": "^1.0.3",
    "@radix-ui/react-tabs": "^1.0.4",
    "@tanstack/react-table": "^8.11.0",
    "@tremor/react": "^3.14.0",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.0.0",
    "cmdk": "^1.0.0",
    "formik": "^2.4.5",
    "lucide-react": "^0.294.0",
    "next": "14.1.3",
    "next-themes": "^0.2.1",
    "react": "^18.2.0",
    "react-day-picker": "^8.10.0",
    "react-dom": "^18.2.0",
    "tailwind-merge": "^2.2.1",
    "tailwindcss-animate": "^1.0.7",
    "vaul": "^0.9.0"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18.2.0",
    "@types/react-dom": "^18.2.0",
    "autoprefixer": "^10.0.1",
    "eslint": "^8",
    "eslint-config-next": "14.0.3",
    "postcss": "^8",
    "prettier": "2.8.0",
    "prettier-plugin-tailwindcss": "^0.2.8",
    "tailwindcss": "^3.3.0",
    "typescript": "^5"
  }

[pacocoursey]

You need to render the CommandList part. Duplicate of #230