Input in Dropdown

[raphaelniederer]

Hello,

I try to create a React Filter Component with Headless UI and Dropdown.

The Dropdown works fine if I use it for a simple Button-Group. But, if I try to place inside a Input I have two problems:

1. I can't press Space in the Input.
2. If i press Enter the form doesn't submit (the Dropdown close)

My Dropdown-Component:

<Menu as="div" className="relative inline-block text-left">
    <Menu.Button>
        <Button variation={variation} size={size} iconRight="ChevronDownIcon">
            {label}
        </Button>
    </Menu.Button>
    <Transition
        as={Fragment}
        enter="transition ease-out duration-100"
        enterFrom="transform opacity-0 scale-95"
        enterTo="transform opacity-100 scale-100"
        leave="transition ease-in duration-75"
        leaveFrom="transform opacity-100 scale-100"
        leaveTo="transform opacity-0 scale-95"
    >
        <Menu.Items className="absolute">
            <div className="bg-white mt-1 py-2 rounded shadow-md border border-grey-200 w-64 flex flex-col focus:outline-none">
                {children}
            </div>
        </Menu.Items>
    </Transition>
</Menu>

How I use it at the moment:

<Dropdown {...props}>
    <div className="mx-4">
        <Input register={register} name="name" size={InputSizes.FULL} />
    </div>
</Dropdown>

What did I wrong? Can anyone help me please?

[raphaelniederer]

Solution: Use Popover - there it works.