Input inside a dropdown is not working (can't type)

[0xMALVEE]

• I have searched the Issues to see if this bug has already been reported
• I have tested the latest version

Steps to reproduce

Code given bellow.

Current behavior

When I put a input inside the Dropdown header I can't type in that input box. But if I put it outside I can type. I can only increase using the up / down arrow in the right side of the input but I want to be able to type also.

Expected behavior

I should be able to type there. not only up/down arrow.

Context

So I have a dropdown and people can select area as numbers.

  <Dropdown className={styles.dropdown} label={'Area'}>
              <Dropdown.Header>
                <label htmlFor="purpose" className="block text-sm font-medium mb-2">
                  Area (sqft)
                </label>
                <div>
                  <div className="mb-2 block">
                    <Label htmlFor="minimum-area" value="Minimum sqft" />
                  </div>
                  <TextInput
                    id="minimum-area"
                    placeholder="Minimum sqft"
                    onChange={(e: any) => {
                      setMinArea(e.target.value as number)
                      console.log(e.target.value)
                    }}
                    value={minArea}
                    sizing="sm"
                    step={100}
                    min={0}
                    type="number"
                  />
                </div>
                <div>
                  <div className="mb-2 block">
                    <Label htmlFor="maximum-area" value="Maximum sqft" />
                  </div>
                  <TextInput
                    id="maximum-area"
                    onChange={(e: any) => setMaxArea(e.target.value as number)}
                    placeholder="Maximum sqft"
                    value={maxArea}
                    sizing="sm"
                    step={100}
                    min={0}
                    type="number"
                  />
                </div>
              </Dropdown.Header>
              <Dropdown.Item className="hover:bg-transparent">
                <div className="flex justify-between w-[100%] ">
                  <Button
                    onClick={(e: any) => {
                      setMinArea(0)
                      setMaxArea(500)
                    }}
                    className="w-[46%]"
                  >
                    Reset
                  </Button>
                  <Button className="w-[46%]">Done</Button>
                </div>
              </Dropdown.Item>
            </Dropdown>

[ivoneijr]

Very similar issue here...

In my case, I have a component inside Dropdown.Item with its own state management, but changing this component state just doesn't work 🤡

I had to use Headlessui for dropdowns...

[tulup-conner]

Hi there, this combination of components is definitely not a use case I was aware of!

We use a third-party library called Floating UI to manage most of the logic in the Dropdown so I'm inclined that this is an issue with focus trap being controlled by our usage of Floating UI.

Your usage seems reasonable here so it definitely should work. Thanks for submitting this. We can take a look at this, but definitely feel free to try and contribute if you have the time - it would speed things along. The file in question is Dropdown.tsx.

[ChrisCoastal]

The issue seems to be related to Floating UI as you said. The opened pull request should do the trick.

[rluders]

Folks, check the discussion at #941 - it seems that there is a misunderstanding related to the Dropdown and Popover components.

[evrrnv]

Same, I'm still having this issue.

[eyqs]

Having this issue as well. Please let us know if there are any updates!

[xdmaury]

I am using onKeyDown={(e) => e.stopPropagation()}.