Skip to content

Dropdown with TextInput #1033

@MateoWartelle

Description

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

Summary

Describe how it should work, and provide examples of the solution, which might include screenshots or code snippets.

The textinput should allow typing instead it just removes focus.

Context

What are you trying to accomplish? How is your use case affected by not having this feature?

recreating this flowbite dropdown for #998

flowbite-checkbox-dropdown

dropdown-with-textinput

example:

<div className="flex items-center justify-center">
    <Dropdown label="Dropdown search" dismissOnClick={false} className="z-50">
      <Dropdown.Item>
        <TextInput placeholder="Search user" icon={MdSearch} />
      </Dropdown.Item>
      <Dropdown.Item>
        <Checkbox id="bonnie-green-checkbox" />
        <Label htmlFor="bonnie-green-checkbox" className="w-100 ml-2 flex">
          Bonnie Green
        </Label>
      </Dropdown.Item>
      <Dropdown.Item>
        <Checkbox id="jese-leos-checkbox" />
        <Label htmlFor="jese-leos-checkbox" className="w-100 ml-2 flex">
          Jese Leos
        </Label>
      </Dropdown.Item>
      <Dropdown.Item>
        <Checkbox id="michael-gough-checkbox" />
        <Label htmlFor="michael-gough-checkbox" className="w-100 ml-2 flex">
          Michael Gough
        </Label>
      </Dropdown.Item>
      <Dropdown.Item>
        <Checkbox id="robert-wall-checkbox" />
        <Label htmlFor="robert-wall-checkbox" className="w-100 ml-2 flex">
          Robert Wall
        </Label>
      </Dropdown.Item>
      <Dropdown.Item>
        <Checkbox id="joseph-mcfall-checkbox" />
        <Label htmlFor="joseph-mcfall-checkbox" className="w-100 ml-2 flex">
          Joseph Mcfall
        </Label>
      </Dropdown.Item>
      <Dropdown.Item>
        <Checkbox id="leslie-livingston-checkbox" />
        <Label htmlFor="leslie-livingston-checkbox" className="w-100 ml-2 flex">
          Leslie Livingston
        </Label>
      </Dropdown.Item>
      <Dropdown.Item>
        <Checkbox id="roberta-casas-checkbox" />
        <Label htmlFor="roberta-casas-checkbox" className="w-100 ml-2 flex">
          Roberta Casas
        </Label>
      </Dropdown.Item>
      <Dropdown.Divider />
      <Dropdown.Item>Delete user</Dropdown.Item>
    </Dropdown>
  </div>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions