bootstrap dropdown/form.control nesting

[tylly]

What stack are you using?

(ex: MERN(mongoose + react), DR(django + react), PEN, etc.)

MERN

What's the problem you're trying to solve?

I would like to nest a bootstrap Dropdown inside of a bootstrap Form.Control

Post any code you think might be relevant (one fenced block per file)

         <DropdownButton onSelect={handleSelect}>
          <Tags/>
          </DropdownButton>

          <Form.Control
            placeholder="Tags"
            name="tags"
            id={project._id}
            value={tags}
            onChange={handleChange}
            className="mt-2"
            style={{ textAlign: "center" }}
          >

If you see an error message, post it here. If you don't, what unexpected behavior are you seeing?

AS the code is set up, there is no error because the dropdown is above the form control. when i try to nest it by making form control a non-self closing tag and putting the dropdown in between, i get this

react_devtools_backend.js:4026 The above error occurred in the <input> component:

    at input
    at form
    at http://localhost:3000/static/js/bundle.js:81170:5
    at div
    at div
    at ProjectForm (http://localhost:3000/static/js/bundle.js:4169:5)

What is your best guess as to the source of the problem?

boostrap limitations

What things have you already tried to solve the problem?

tried to nest the dropdown in the form control like described above, tried to nest the dropdown in a standard html input

Paste a link to your repository here https://github.com/tylly/project-4-react

[kestler01]

I'm unsure of what you're trying to do with your drop down, and I think some extra context would help shot in the dark suggestion - have you tried using datalists from vanilla bootstrap https://getbootstrap.com/docs/5.0/forms/form-control/#datalists ?

[tylly]

I want this dropdown arrow button inside of the tags input field

[tylly]

I kiiiiiind of solved it with this

          <div id="tagField">
            <Form.Control
              placeholder="Tags"
              name="tags"
              id={project._id}
              value={tags}
              className="mt-2"
              style={{ textAlign: "center" }}
            ></Form.Control>
            <Dropdown>
              <DropdownButton
                style={{ marginTop: "8px" }}
                onSelect={handleSelect}
              >
                <Tags />
              </DropdownButton>
            </Dropdown>
          </div>

and then i adjusted the displaying styling of the parent div with css. so now it looks like this

[tylly]

but now value (or placeholder) of the tags input isnt aligned with the others

[kestler01]

that's fixable with css stuff - like setting the width to a screen % etc.

[timmshinbone]

Check out the ToyForm from the pets app, we used a dropdown menu there for the condition field: ToyForm.js

[kestler01]

@timmshinbone Thank you !